Skip to content

Instantly share code, notes, and snippets.

@sandman
Last active September 9, 2020 08:17
Show Gist options
  • Save sandman/8278855483720d326e26 to your computer and use it in GitHub Desktop.
Save sandman/8278855483720d326e26 to your computer and use it in GitHub Desktop.
Demo of Bootstrap validator double submit bug
$(document).ready(function () {
$('#payment-form').bootstrapValidator({
// added validators including callback validation for date expiry etc..
});
$("#payment-form").submit(function (event) {
// disable the submit button to prevent repeated clicks:
$('#submitButton').prop('disabled', true);
$('#submitButton').attr("disabled", "disabled"); // Just to be sure
// Make some 3rd Party API calls (stripe)
//Stripe.createToken..
// Prevent the form from submitting:
return false;
}); // End of submit handler
}); // End of $(document).ready
function stripeResponseHandler(status, response) {
// Check for an error:
if (response.error) {
reportError(response.error.message);
} else { // No errors, submit the form:
var f = $("#payment-form");
// Token contains id, last4, and card type:
var token = response['id'];
// Insert the token into the form so it gets submitted to the server
f.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
// Submit the form:
f.get(0).submit();
}
}
@sandman
Copy link
Author

sandman commented Nov 13, 2014

Problem description: Even if the HTML form (not shown) is submitted once, the Jquery submit event on Line 10 is called twice.

@dani24gl
Copy link

I think the problem is that you are not using the success.form.bv event like it's recommended in the page: http://bootstrapvalidator.com/examples/ajax-submit/

I think your code should be:

$(document).ready(function () {

$('#payment-form').bootstrapValidator({
               //... added validators including callback validation for date expiry etc..

}).on('success.form.bv',function(e){
      e.preventDefault(); // <----- THIS IS NEEDED

      $('#submitButton').prop('disabled', true);
  $('#submitButton').attr("disabled", "disabled"); 

});

@nekromoff
Copy link

the suggestion of adding
on('success.form.bv',function(e){
e.preventDefault(); // <----- THIS IS NEEDED

fixes it for me

@daryllvsantos
Copy link

guys can I use this to insert data to php my admin??

@G33N
Copy link

G33N commented Oct 9, 2016

Nice! ty

@dutchman1990
Copy link

guys can I use this to insert data to php my admin??

Indeed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment