如何停止重複Ajax後？

Question

我有輸入驗證和ajax後的問題。我用http://1000hz.github.io/bootstrap-validator/

這裏是我的表單代碼：

<form id="order-form" class="form" action="" method="post" novalidate="true" role="form" data-toggle="validator"> 
 
    <fieldset> 
 
    <div id="callback-type" class="btn-group"> 
 
     <button class="btn btn-default private-callback btn-primary" type="button" data-type="private"> 
 
     Private 
 
     </button> 
 
     <button class="btn btn-default public-callback" type="button" data-type="public"> 
 
     Public 
 
     </button> 
 
     <input class="callback-type" type="hidden" id="callback-type-data" name="callback[type]" value="private"> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset style="border: none"> 
 
    <section class="callback-time-select form-group"> 
 
     <label class="input"> <i class="icon-prepend fa fa-user"></i> 
 
     <input class="callback-datetime" placeholder="<?=date('Y/m/d H:i');?>" type="text" name="callback[time]" id="callback-time" required/> 
 
     <div class="time-clear"> 
 
      <i class="fa fa-times-circle"></i> 
 
     </div> 
 
     </label> 
 
     <div class="help-block with-errors"></div> 
 
    </section> 
 
    <section class="second callback-agent-section form-group"> 
 
     <select class="callback-agent" name="callback[user]" style="width:100%" class="select2" id="select-callback-agent" required> 
 
     <option></option> 
 
     <option value="1">Name</option> 
 
     </select> 
 
     <div class="help-block with-errors"></div> 
 
    </section> 
 
    </fieldset> 
 
    <div class="tab-actions"> 
 
    <button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-create">Set Callback</button> 
 
    <button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-update" style="display: none;">Update Callback</button> 
 
    <button type="button" class="btn btn-default btn-sm submit-button callback-btn-remove" style="display: none;">Remove</button> 
 
    </div> 
 
</form>

這裏是我的javascript代碼：

$(document).on('click', '#dealing-modal #callback-tab .tab-actions .callback-btn-create', function(){ 
     $(this).closest('form').validator().submit(function(e){ 
      e.preventDefault(); 
      if (!$('.has-error').length) { 
       self.create(); 
      } 
     }); 
}); 

而且self.create方法：

create: function() 
{ 
    Application.Debug("Calllback.create"); 
    var self = this; 
var form = $(":input", this.window).serialize(); 
     form = form + '&call_id=' + this.call.id; 

$.post(Application.url+'callbacks/create', form, function(data){ 
    if(data.status === true) { 
    self.callback = data.callback; 
      $(".callback-btn-create",self.window).css('display','none'); 
      $(".callback-btn-update",self.window).css('display','inline'); 
      $(".callback-btn-remove",self.window).css('display','inline'); 
    } else { 
    Application.Debug("Calllback.create - ERROR"); 
    } 
}); 
} 

我需要驗證表單輸入並在點擊按鈕上發送ajax文章。它啓動表單提交，並在表單有效後發送郵件。

而且我的問題是：

當輸入是空的，我按下按鈕創建，形成驗證它，我看到錯誤文本。沒關係！但是，當我點擊按鈕1或2次等，並在我完成所有輸入後，方法self.create();做阿賈克斯帖子多少次我點擊按鈕。

問題在哪裏？

Answer 1

您只需在ajax調用之後單擊和之前禁用或在按鈕下方顯示none，反之亦然。

<button type="button" class="btn btn-primary btn-sm submit-button callback- btn-create">Set Callback</button> 

Answer 2

var $submitBtn; // Lets say this is the jQuery object that contains the form button element. 

$submitBtn.attr('disabled', true); 

$.post().always(function() { 
    $submitBtn.attr('disabled', false); 
}); 

而且，有一些殘疾人士的造型爲你的按鈕，如：

input[type="submit"][disabled] { 
    opacity: .4; 
    pointer-events: none; 
} 

另一種方法：

var $form; // Lets say this is the jQuery object that contains the form element. 

if ($form.data('posting')) { 
    return false; // We are already posting data, don't do anything. 
} 

$form.data('posting', true); 

$.post().always(function() { 
    $form.data('posting', false); 
});