Why is jquery-ajax submitting form multiple times?

Question

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);
?>

Answer 1

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);
                }
        });

   });

});

Answer 2

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 .

Answer 3

You can try this:

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