Ajax request being submitted multiple times

Ajax request being submitted multiple times

Im working on fixing some validation to my forms. The validation works, problem is that when no validation error occur, the form submits as many times the user tried to submit. It is like the requests stacks up on a pile.

Forms has this submit button that calls my ajax function create_new_stuff

The function

function create_new_stuff(){        $("#createForm").submit(function(event){                   event.preventDefault();          event.returnValue = false;            var input_value = $("#createValue").val();            if(input_value === "" || null){                console.log("Wrong input value");              return;          }          else{                var request;              var $form = $(this);              var serializedData = $form.serialize();                request = $.ajax({                  url: "/new_stuff.php",                  type: "post",                  data: serializedData                            });                // callback handler that will be called on success              request.done(function (response, textStatus, jqXHR){                    console.log("Stuff created!", response);                               create_new_stuff_form();                  var successDiv = $("
Stuff was created
");                  $("#responseMessages").html(successDiv);                });                // callback handler that will be called on failure              request.fail(function (jqXHR, textStatus, errorThrown){                    console.error(                      "The following error occured: "+                      textStatus, errorThrown           

); }); } }); }

Answer by Suman Biswas for Ajax request being submitted multiple times

And return false when you don't want to submit the form from your javascript function.

Answer by zhaoyou for Ajax request being submitted multiple times

Change button type submit to button or change onclick to onsubmit

Answer by rack_nilesh for Ajax request being submitted multiple times

instead of adding onclick event to submit button, add onsubmit event to form.

Answer by Koushan for Ajax request being submitted multiple times

Prevents the event from bubbling up by:

event.stopPropagation();  

Answer by MixedVeg for Ajax request being submitted multiple times

Every time you click on Submit button the onclick calls the create_new_stuff() method to do the required stuff. If you think to do this on form submit or button click both shall show the same behaviour. You can try something like this:

HTML

Enter Value Here:       

JS

$("#submitbutton").on('click', function(e) {  e.preventDefault();  $('#submitbutton').attr('disabled',true);  var x = $("#formelement").val();    if(x=="" || null)  {      console.log("Wrong Input..!!");      return;  }  else {      console.log("Hello" + " " +x);  }  });  

Working Demo : DEMO

And you can put a loader here to show server action being done.!!!

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72