为什么我的表格不能在移动设备上使用？

Question

I have a form downloaded from http://reusableforms.com/ that works great on desktop. But the submit button changes to "sending ..." and gets stuck on mobile devices. An error message doesn't display and the page just stops working. What would cause this problem? I am putting my javascript code below. Here is the site for reference: 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
I have opened remote Safari dev tools and the XHR Post is timing out. I'm not sure what that means.

EDIT
Okay, the problem is that the form stops working if the two upload fields in the form aren't used on iOS. Does anyone know a workaround?

Answer 1

I reviewed your code and would suggest some minor updates:

$(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,
    });
  });
});

I see nothing that is "wrong", just some syntax cleanup. Also this was sort of ambiguous in the creation of FormData, so I switched to a more specific element: $form[0] .

I adjusted a few other things to be more jQuery like. All functions the same.

Also, make sure that Ajax URL path is correct. You have:

url: 'handler.php'

Make sure that your can browse to this directly. If the path is not correct, the form will not post properly. It may be better to use a Direct URL Path instead of a relative path.

If you have access to your Web Server or PHP Logs, you can also check there to see if POSTs to your handler.php script are failing in some way. In Safari, you may want to check Network results and see if it provide more response details.

Test it, let me know if it works any better.