表格未在iPad上提交

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顯示“正在加載gif”：

$('.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中發生的：

1. 單擊提交按鈕
2. 按鈕已禁用
3. 顯示加載圖片

奇怪的是，如果我刪除$('.btn-modal').attr('disabled', "disabled"); ，但結果是未禁用按鈕，因此不會顯示任何加載。 那么，如何防止iPad中出現此錯誤？ 先感謝您

Answer 1

單擊提交按鈕的默認操作是提交表單。 在jQuery中，您可以使用event.preventDefault()或return false; 來自事件處理程序，以防止發生默認操作。

該事件的默認操作不會被觸發

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

您的代碼應如下所示

$('.btn-send').on('click', function(e){
    e.preventDefault();
    $('.waiting').fadeIn('fast');
});

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

您可能需要對此進行一些編輯，但這是要點。