Как остановить повторение сообщения 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(); сделал сообщение ajax столько же, сколько раз нажал кнопку.

Где проблема?

Answer 1

Вам просто нужно отключить или отобразить ниже кнопку ниже после щелчка и перед вызовом ajax и наоборот после успешного ответа.

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