Ajax call is not executing with a other Form SUMBIT

Question

I have a function:

function blur_slide_visit_count(){
    $.ajax({
        type: 'POST',
        url: 'add_save_slide_visitor_count.php',
        async: false,
        data: { fillvalue: fieldArray },
        success : function(){}
    });
}

I also have an element:

<input class="btn btn-default btn1" type="submit" id="submit-btn">

I've attached a listener to the input that calls the function:

$("#submit-btn").click(function() {
    blur_slide_visit_count();
    $("form").submit();
});

What I expect to happen is that when the user clicks the input, the function is called and the AJAX executes which calls the PHP page which should update my DB. But, when I click the button, the DB never gets updated. I think the AJAX call is dropping, but I don't know why.

Can anyone help explain why the above code isn't working?

if you are using ajax why do you submit again?ajax method is asynchronous .you have to wait until ajax request complete — Madhawa Priyashantha, Jul 22 '16 at 16:57
If you need to do both. It would be better to listen to the submit event instead of the click event '$("#submit-btn").submit(function(){})'. To make sure the ajax actually completes you may want to do a synchronous blocking ajax call instead of async. — algorithmicMoose, Jul 22 '16 at 17:00
If you want both Ajax and From submission, trigger form submission event after ajax call is done. Check this link http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done — Ravinder Reddy, Jul 22 '16 at 17:03
Why are you submitting the form again after it was submitted to get to that point? — epascarello, Jul 22 '16 at 17:05

George Pant · Accepted Answer · 2016-07-22T17:10:54.933

2

You must first stop the form from submitting by using preventDefault() since you want to use ajax.Just add event.preventDefault(); to the top of your click handler and then place your code.

 $("#submit-btn").click(function(event) { 
    event.preventDefault(); 
    ....
 });

edited Jul 22 '16 at 17:10

answered Jul 22 '16 at 16:59

George Pant

2,079
1
9
14

Maciej Sikora · Answer 2 · 2016-07-22T17:34:53.530

Why using async=false - this should not be used, it blocks user interaction with page for time of ajax call, next thing - some html elements has default behavior, default bindings, like - form and submit, default behavior is to send form, to avoid this in bind should be use preventDefault():

$("#submit-btn").submit(function(e) {

   e.preventDefault();
   blur_slide_visit_count();
});

Look that i binded submit not click ( good practice ), if You need to bind click, use button not input, then click will not fire submit event.

Change your input to ( very important type="button" ps. type="submit" will fire submit on form):

<button class="btn btn-default btn1" type="button" id="submit-btn">

then bind it ( in this situation we not need to use preventDefault )

$("#submit-btn").click(function(e) {

   blur_slide_visit_count();
});

last thing if you need to call submit after ajax then change Your function ( i added function - callback to be called after ajax call ):

function blur_slide_visit_count(callback){
  $.ajax({
  type: 'POST',
  url: 'add_save_slide_visitor_count.php',
  async: true,
  data: { fillvalue: fieldArray },
  success : function(){

   //call callback after ajax
   callback();
}
});
}

and then bind looks like:

$("#submit-btn").click(function(e) {

   blur_slide_visit_count(function(){
       $("form").submit();
   });
});

Ajax call is not executing with a other Form SUMBIT

2 Answers2