Why is jquery-ajax submitting form multiple times?

jquery prevent form submit multiple times
ajax call multiple times issue
how to stop multiple ajax requests
how to prevent multiple clicks on submit button in jquery
jquery submit called multiple times
how to call same ajax multiple times
jquery click event firing multiple times
ajax form submitting twice

I have read this: jQuery ajax form submitting multiple times

It didn't help.

If i type something on form and click the submit button then it sends one request. Second time if i type something and click it sends two requests. Third time it sends three requests and so on. Why is this? Did i do any mistake in jquery code?

Here is my code:

index.php =>

<div id="id_div_1" class="cl_div_comment_container"></div>
<form id="id_form_1" method="POST">
<input type="hidden" value="1" name="nm_hidden_post_id">
<textarea class="cl_textarea_comment" style="resize:none;" rows="1" cols="50" name="nm_comment_content"></textarea>
<input class="cl_submit_comment" type="submit" value="Comment" name="nm_submit_comment">
</form>

javascript.js =>

$(document).ready(function(){
    console.log('hello');
    $('input[name="nm_submit_comment"]').on('click',function(){
        var frm = $(this).closest("form")[0];
        var frm_id = $(frm).attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];
        console.log($('div#id_div_' + frm_id_splitted_2));
        $(frm).on('submit',function(e){
            e.preventDefault();
            frm_serialized = $(this).serialize();
            console.log(frm_serialized);

            $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
            });

        });

    });

});

save-comment.php =>

<?php

if (session_id() == '') {
    session_start();
}    

echo json_encode($_POST);
?>

You are registering the event for form submit inside the code you have for the click event on the button. So every time you click the button, it will keep adding the event over and over.

This should be good enough.

$(document).ready(function(){

   $('input[name="nm_submit_comment"]').on('click',function(e){
        e.preventDefault();

        var frm = $(this).closest("form");
        var frm_id = frm.attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];

        var frm_serialized = frm.serialize();

        $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
        });

   });

});

jQuery AJAX running multiple times, The script does what it should however it's running several times, 12, And, you can use a shorter form… So index.php displays problem-page.php via ajax, on problem-page.php I'm trying to use ajax again to submit data� The reason it enter an infinite loop is because it invokes the same submit event listener again. If not, you can just queue two ajax-submits, one to the e-mail page, and again to the client. Finally, you can unbind the event listener. A little known way to unbind an event listener is to pass in the event object to the unbind -call.

Try one then on

$("#id_form_1").one('submit', function (e) {
    e.preventDefault();
    frm_serialized = $(this).serialize();
    console.log(frm_serialized);

    $.ajax({
        url: "save-comment.php",
        method: "POST",
        data: frm_serialized,
        success: function (data) {
            console.log(data);
            $('div#id_div_' + frm_id_splitted_2).append(data);
        }
    });

});

Also no need to make submit bind just serialize your nearest form and make ajax call. You are binding event inside and event performs multiple binding.

Simple double form submission prevention with jQuery – The Pug , If an impatient user clicks "Submit" multiple times, a form may be Ajax forms would, of course, also require beenSubmitted to be reset after the� In order to implement the submission of multiple forms demo, we are going to use Ajax, jQuery, JavaScript, HTML and PHP. Why use jQuery? Ajax forms can be used with many other methods. However, here we have chosen to go with jQuery for quite a number of reasons. It is definitely true that jQuery offers certain advantages.

You can try this:

$(document).off().on("click","#submit",(function(e) {  
        e.preventDefault();
}

How to prevent the submit button from being hit multiple times , But i get an error if the user hits submit multiple times. glyphicon-refresh' }, submitHandler: function(validator, form, submitButton) { $.ajax({ type: "POST", url: � What i think is that the ajax has 4 ready state..and each time states changes the ajax function is called to check whether it is the required state or not so for the first three times the function is called and hence 3 times the jquery is triggered.. that is what i think – Swastik Pareek Jun 13 '13 at 7:15

ajax calls firing multiple times, Hi guys, I have a lil problem to perform CRUD on single page using jquery. i'm The problem is when i'm trying to update a record the ajax call fires two times. i don't <div class="col-md-6"> <input type="text" class="form-control" name=" name" type="submit" class="btn btn-primary" style="margin-right: 15px;"> Submit� 1 time form is submitting 1 time. then if I click on another messages share button it is submitting 3 times. then if I click on another messages share button it is submitting 7 times and so on. I am not getting why it is submitting multiple times.

jQuery ajax form submitting multiple times, I am having some issues with multiple form submissions with a jquery/ajax form. I found this by printing every instance of form submission on� If I am placing the jquery link just above the HTML code then the thanks message is appearing but the mail is getting two times, and if I place the jquery link in the head of HTML then the mail is

Multiple Simultaneous Ajax Requests (with one callback) in jQuery , Ajax calls in jQuery provide callbacks: $.ajax({ statusCode: { url: "/feature", success: function() { // Ajax success } } });. Or the “Deferred” way, this time using a � In order to submit multiple forms at the same time you'll need a function that invokes the submit events of each form.The jQuery plugin add an event listener to the onsubmit event of the form(s) you specify.

Comments
  • You can avoid this line; $(frm).on('submit',function(e){ }
  • your adding a new form submit handler after each click
  • each ajax call is also evaluating the same js file again on each click. therefore, two click handlers and two ajax calls, then three, then four, etc...
  • No need to make submit bind just serialize your nearest form and make ajax call.
  • Great! I had the same issue: submit form inside of a datatable button click. Every time the click was performed, the submit event has increased. Now, with this solution, it works fine!
  • I pulled lot of hair from head thanks to this. I also had form.submit inside click event and it was duplicating this all the time when it was clicked. I learned my lesson.
  • This worked great for me where a click opens a modal window and then within that modal is a form for the user to submit. Therefore the on('submit') was changed to one('submit') for it to work