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

  });   
});

修改
我打开了远程Safari开发工具，XHR Post正在超时。我不确定这意味着什么。

修改
好的，问题是如果表单中的两个上传字段未在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。所有功能都相同。

另外，请确保Ajax URL路径正确。你有：

url: 'handler.php'

确保您可以直接浏览此内容。如果路径不正确，表单将无法正确发布。使用直接URL路径而不是相对路径可能更好。

如果您可以访问Web服务器或PHP日志，还可以在那里检查您的handler.php脚本的POST是否以某种方式失败。在Safari中，您可能需要检查网络结果，看看它是否提供了更多响应详细信息。

测试一下，让我知道它是否有效。

为什么我的表单不适用于移动设备？

1 个答案: