Почему jquery-ajax отправляет форму несколько раз?

Question

Я прочитал это: 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);
?>

javascript php jquery ajax forms

2

shibly 19 Дек 2015 в 07:56

Answer 1

Вы регистрируете событие для формы 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

Answer 2

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

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

0

Dino 3 Ноя 2019 в 17:26

Answer 3

Попробуйте 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

Почему jquery-ajax отправляет форму несколько раз?

3 ответа

Похожие вопросы

Новые вопросы

javascript