Я прочитал это: jjuery ajax-форма, отправляемая несколько раз

Это не помогло.

Если я что-то наберу в форме и нажму кнопку «Отправить», он отправит один запрос. Второй раз, если я что-то наберу и нажму на него, отправляются два запроса В третий раз отправляет три запроса и так далее. Почему это? Я сделал какую-либо ошибку в коде JQuery?

Вот мой код:

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);
?>
2
shibly 19 Дек 2015 в 07:56

3 ответа

Лучший ответ

Вы регистрируете событие для формы submit внутри кода, который вы используете для события click на кнопке. Поэтому каждый раз, когда вы нажимаете кнопку, он будет добавлять событие снова и снова.

Это должно быть достаточно хорошо.

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

   });

});
7
Shyju 19 Дек 2015 в 05:12

Вы можете попробовать это:

$(document).off().on("click","#submit",(function(e) {  
        e.preventDefault();
}
0
Dino 3 Ноя 2019 в 17:26

Попробуйте one затем 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);
        }
    });

});

Также нет необходимости , чтобы отправить bind просто serialize ближайшую форму и сделать ajax вызов. Вы связываете событие внутри, а событие выполняет multiple binding.

6
Parth Trivedi 19 Дек 2015 в 05:12