Processing a form through AJAX - Avoiding GET & POST requests from receiving

Question

I am trying to submit form data via AJAX. But I see that GET and POST requests are generated.

Here is my form Submit handler

 <button id="submit" class="btn">Submit</button>

I have a jQuery handler configured for the onClick event. I create a POST request and send it through AJAX.

$(function(){
    $('#submit').click(function() {
        $.ajax({
        ...
        ...
     });
  });
});

I just need to send a POST request. How to stop the generated GET request?

Answer 1

Instead of binding to a button click, bind to the form submit event and disable the default behavior:

$(function(){
    $('form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
        ...
        ...
     });
  });
});