jQuery AJAX form submits twice

jquery ajax submit
James Privett picture James Privett · Nov 25, 2013 · Viewed 59.6k times · Source

I've got a form that I'm capturing via jQuery and sending via AJAX. My problem is that the form submits more than once every time I refresh the page.

I've tried to unbind the submit button but then the form is posted normally after the first submit. Any help would be appreciated

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});

Answer

Chris Sercombe picture Chris Sercombe · Oct 8, 2014

As well as calling preventDefault, also call stopImmediatePropagation on the event.

$('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

Related questions

jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More
Jquery .on() submit event

I've got a problem with .on(). I have multiple form-elements (forms with class="remember"), also I add another one form.remember using AJAX. So, I want it to handle submit event something like: $('form.remember').on('submit',function(){...}) but form …

Read More
Submitting a jQuery ajax form with two submit buttons

I have a form that looks like this: <form action="/vote/" method="post" class="vote_form"> <input type="hidden" name="question_id" value="10" /> <input type="image" src="vote_down.png" class="vote_down" name="submit" …

Read More