Почему моя форма не работает на мобильных устройствах?

Question

У меня есть форма, скачанная с http://reusableforms.com/, которая отлично работает на рабочем столе. Но кнопка отправки меняется на «отправка ...» и застревает на мобильных устройствах. Сообщение об ошибке не отображается, и страница просто перестает работать. Что может вызвать эту проблему? Я помещаю свой код JavaScript ниже. Вот сайт для справки: http://jasminew.xyz/flash

$(function()
{

$.ajaxSetup({ cache: false }); // or iPhones don't get fresh data

function after_form_submitted(data) 
{
    if(data.result == 'success')
    {
        $('#carouselExampleIndicators').hide();
        $('form#reused_form').hide();
        $('#success_message').show();
        $('#error_message').hide();
    }
    else
    {
        $('#error_message').append('<ul></ul>');

        jQuery.each(data.errors,function(key,val)
        {
            $('#error_message 
ul').append('<li>'+key+':'+val+'</li>');
        });
        $('#success_message').hide();
        $('#error_message').show();

        //reverse the response on the button
        $('button[type="button"]', $form).each(function()
        {
            $btn = $(this);
            label = $btn.prop('orig_label');
            if(label)
            {
                $btn.prop('type','submit' ); 
                $btn.text(label);
                $btn.prop('orig_label','');
            }
        });

    }//else
  }

$('#reused_form').submit(function(e)
  {
    e.preventDefault();

    $form = $(this);
    //show some response on the button
    $('button[type="submit"]', $form).each(function()
    {
        $btn = $(this);
        $btn.prop('type','button' ); 
        $btn.prop('orig_label',$btn.text());
        $btn.text('Sending ...');
    });


                var formdata = new FormData(this);
        $.ajax({
            type: "POST",
            url: 'handler.php',
            data: formdata,
            success: after_form_submitted,
            dataType: 'json' ,
            processData: false,
            contentType: false,
            cache: false,
        });

  });   
});

EDIT
Я открыл удаленные инструменты разработки Safari, и сообщение XHR Post истекло. Я не уверен, что это значит.

EDIT
Хорошо, проблема в том, что форма перестает работать, если два поля загрузки в форме не используются в iOS. Кто-нибудь знает обходной путь?

Answer 1

Я просмотрел ваш код и предложил бы несколько небольших обновлений:

$(function() {
  $.ajaxSetup({
    cache: false
  }); // or iPhones don't get fresh data

  function after_form_submitted(data) {
    if (data.result == 'success') {
      $('#carouselExampleIndicators').hide();
      $('form#reused_form').hide();
      $('#success_message').show();
      $('#error_message').hide();
    } else {
      $('#error_message').append('<ul></ul>');
      $.each(data.errors, function(key, val) {
        $("<li>").html(key + ": " + val).appendTo($('#error_message ul'));
      });
      $('#success_message').hide();
      $('#error_message').show();

      //reverse the response on the button
      $('button[type="button"]', $form).each(function() {
        var $btn = $(this);
        var label = $btn.data('orig-label');
        if (label) {
          $btn.prop('type', 'submit');
          $btn.text(label);
          $btn.data('orig-label', null);
        }
      });
    }
  }

  $('#reused_form').submit(function(e) {
    e.preventDefault();

    var $form = $(this);
    //show some response on the button
    $('button[type="submit"]', $form).each(function() {
      var $btn = $(this);
      $btn.prop('type', 'button');
      $btn.data('orig-label', $btn.text());
      $btn.text('Sending ...');
    });

    var formdata = new FormData($form[0]);
    $.ajax({
      type: "POST",
      url: 'handler.php',
      data: formdata,
      success: after_form_submitted,
      dataType: 'json',
      processData: false,
      contentType: false,
      cache: false,
    });
  });
});

Я не вижу ничего "неправильного", только некоторая очистка синтаксиса. Кроме того, this был немного двусмысленным при создании FormData, поэтому я переключился на более конкретный элемент: $form[0].

Я настроил несколько других вещей, чтобы они больше походили на jQuery. Все функции одинаковы.

Также убедитесь, что URL-адрес Ajax указан правильно. У вас есть:

url: 'handler.php'

Убедитесь, что вы можете перейти к этому напрямую. Если путь указан неверно, форма не будет опубликована должным образом. Может быть лучше использовать прямой URL-путь вместо относительного пути.

Если у вас есть доступ к вашему веб-серверу или журналам PHP, вы также можете проверить, не происходит ли сбой POST в вашем скрипте handler.php. В Safari вы можете проверить сетевые результаты и посмотреть, предоставляют ли они больше подробностей ответа.

Проверьте это, дайте мне знать, если это работает лучше.