I have a submit event handler and a bootstrapValidator object for a form. If I leave both of them uncommented the form will submit two times (upon clicking the submit button). Does anybody know, how I can prevent the double submission?
Bootstrap validator:
$('#ins3').bootstrapValidator({
container: '#messages3',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
manufacturername: {
validators: {
notEmpty: {
message: 'Please enter a new brandname'
}
}
}
}
});
Submit event handler for the form:
// Product
$("#ins3").submit(function(event) {
//alert('test');
var ajaxRequest;
// Stop form from submitting normally
event.preventDefault();
// Clear result div
$("#brandResultDiv").html('');
// Get from elements values
var values = $(this).serialize();
ajaxRequest= $.ajax({
url: "Subpages/addBrandname_script.php",
type: "post",
data: values
});
// request cab be abort by ajaxRequest.abort()
ajaxRequest.done(function (response, textStatus, jqXHR){
// POST Completed Successfully
$("#brandResultDiv").html(response);
$("#brandResultDiv").show().delay(2000).fadeOut();
});
// On failure of request this function will be called
ajaxRequest.fail(function (){
// show error
$("#brandFailDiv").html('An error occurred while submitting the request.');
});
});
I've found this answer, which show the submit handler inside the bootstrapValidator object. I was wondering if there is also another way, because I have a lot of forms written in the above way, and that would mean, I would have to rewrite every one of them.