how to stop repeating ajax post?

Question

I have problem with inputs validation and ajax post. I use http://1000hz.github.io/bootstrap-validator/

here is my code of form:

 <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> 

And here is my javascript code:

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

And self.create method:

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

I need to validate form inputs and send ajax post on click button. It initiate form submit, and when send post after form is valid.

And my problem is:

When inputs are empty and i push the button create, form validate it and i see the error text. Its fine! But when i clicked button 1 or 2 times and ect., and after i complete all inputs, method self.create(); doing ajax post as much as times i clicked button.

Where is the problem?

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

And, have some disabled styling for your button like:

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

Another approach:

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