0

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.

Community
  • 1
  • 1
TheAptKid
  • 1,559
  • 3
  • 25
  • 47

0 Answers0