Question

我有以下模态结构，其中包含一个表单：

<div class="modal fade" id="by-email" role="dialog" >
    <div class="modal-dialog">
        <div class="modal-header">
            <small class="waiting"></small>
        </div>
        <div class="modal-content">
            <form action="/test" method="post" id="form-email">
                <button type="button" class="btn btn-default btn-modal" data-dismiss="modal">Cacenl</button>
                <input type="submit" class="btn btn-primary btn-modal btn-send" value="Send">
            </form>

        </div>
    </div>
</div>

另外，我正在使用jQuery来显示＆＃34;加载gif＆＃34;一旦用户通过提交按钮提交表单：

$('.btn-send').on('click', function(e){

    /* with this line, I pretend to disable both buttons in order to 
       prevent the user click them while the form is submitted */
    $('.btn-modal').attr('disabled', "disabled");

    /* show the gift image */
    $('.waiting').fadeIn('fast');
});

在大多数浏览器中，它很酷。但是在iPad中，表单从未提交过。根据我的调试会话，这发生在iPad上：

点击提交按钮
禁用按钮
正在显示加载图片

奇怪的是，如果我删除行$('.btn-modal').attr('disabled', "disabled");，我可以在iPad上使用它，但是因为按钮没有被禁用，也不会显示加载。那么，如何在iPad中防止此错误？提前谢谢

Answer 1

提交按钮单击的默认操作是提交表单。在jQuery中，您可以使用事件处理程序中的ps aux | grep celery或event.preventDefault()来防止发生默认操作。

不会触发事件的默认操作

http://api.jquery.com/event.preventdefault/

您的代码应如下所示

return false;

Answer 2

让表单提交而不更改参与/触发提交过程的元素。稍后禁用按钮：

$('.btn-send').on('click', function(e){

    setTimeout(function() {
      /* with this line, I pretend to disable both buttons in order to 
         prevent the user click them while the form is submitted */
      $('.btn-modal').attr('disabled', "disabled");

      /* show the gift image */
      $('.waiting').fadeIn('fast');

    }, 1);

});

Answer 3

您可以通过ajax提交表单。成功后，您可以禁用该按钮。一个例子是：

$('.btn-send').on('click', function(e){
    $.ajax({
        url: /test,
        type:'POST',
        data: { 'foo': foo},
        success: function(data) {
              $('.btn-modal').attr('disabled', "disabled");

              /* show the gift image */
              $('.waiting').fadeIn('fast');    
        }
    )};
});

您可能需要稍微编辑一下，但这是要点。

表格不在iPad上提交

3 个答案: