形式在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. Submit按鈕點擊禁用
2. 按鈕
3. 加載圖像顯示

奇怪的是，我可以使它在iPad上工作，如果我刪除行$('.btn-modal').attr('disabled', "disabled");，但結果按鈕沒有被禁用，也沒有顯示加載。那麼，我怎樣才能防止iPad中的這個錯誤？預先感謝您

Answer 1

讓表單提交而不更改參與/觸發提交過程的元素。後來禁用按鈕：

$('.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 2

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

事件的默認動作不會被觸發

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

你的代碼看起來應該是這樣

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

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

你可能需要編輯這一點，但這是要點。