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

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

• javascript
• php
• jquery
• ajax
• forms

• You can avoid this line; $(frm).on('submit',function(e){ } – yjs Commented Dec 19, 2015 at 4:58
• 2 your adding a new form submit handler after each click – Ramanlfc Commented Dec 19, 2015 at 4:59
• 2 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... – Jigar Commented Dec 19, 2015 at 5:03
• No need to make submit bind just serialize your nearest form and make ajax call. – Parth Trivedi Commented Dec 19, 2015 at 5:15

3 Answers 3

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

   });

});

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.

You can try this:

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