AJAX 表单只执行一次（第一次输入）答案

【问题标题】：AJAX form executing only once (for first input)AJAX 表单只执行一次（第一次输入）
【发布时间】：2018-09-20 11:15:30
【问题描述】：

我通过while 循环循环输出 sql 选择行。每行都有自己的形式。只有第一种形式有效。其他表单只是刷新页面没有我们的任何结果。在表单提交时通过 AJAX update.php 函数执行。它只在第一个输入字段起作用，不知道如何触发其他字段。

PHP

echo " <div class=\"col-6 flex-vcenter-items fs-1\">
    <form id='form".$row["id"]."' action='' method='POST'>
         <input id='id' name='potnik' value='".$row["id"]."' type='hidden' /> 
         <input id='cas' class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
         <input class='btn btn-outline-primary' id='submit' type='submit' value='Nastavi uro'>
     <label id=\"info\"></label>
 </form>
</div>";

$( document ).ready(function() {
//Async update
    $(function () {
        let idrow = $("#id").val();
        $('#form'+idrow).on('submit', function (e) {

            let updaterow = "update.php?id=";
            console.log(updaterow + idrow);
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: updaterow + idrow,
                data: $('#form'+idrow).serialize(),
                success: function () {
                    console.log('ura posodobljena');
                    //Koda za vstavljanje
                    console.log("Prejšnji čas",$("#id-ura"+idrow).text());
                    $("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
                    console.log("Novi čas",$(".cas"+idrow).val());
                }
            });
        });
    });
});

【问题讨论】：

1. let idrow = $("#id").val(); 总是会给你第一个表格 0.2。而不是id's 使用class 并使您的代码简单而精细
@AlivetoDie 让 idrow = $("#id").val();仅用作组合变量。我只用它来组合 update.php?id= + id number
为什么不使用 data-id 作为 idrow ？
@AlivetoDie 我将let idrow = $("#id").val(); 更改为let idrow = $(".potnikid").val()，还添加了potnikid `#id` 所在的类

标签： php jquery ajax

【解决方案1】：

基本的 HTML 规则是每个元素都有 unique id，因为你在循环中创建 forms 我将使用 classes 而不是 id's

echo " <div class=\"col-6 flex-vcenter-items fs-1\">
    <form class='form' data-id='".$row["id"]."' action='' method='POST'>
         <input  name='potnik' value='".$row["id"]."' type='hidden' /> 
         <input  class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
         <input class='btn btn-outline-primary' type='submit' value='Nastavi uro'>
        <label class=\"info\"></label>
    </form>
</div>";

现在我将根据类更改 jQuery 代码：-

$( document ).ready(function() {
    $('input[type=submit]').on('click', function (e) {
        e.preventDefault();
        var obj = $(this);
        let idrow = obj.closest("form").data('id'); // i have used data-id in forms
        let updaterow = "update.php?id=";
        $.ajax({
            type: 'post',
            url: updaterow + idrow,
            data: obj.closest("form").serialize(),
            success: function () {
                //change these code also based on classes
                console.log('ura posodobljena');
                console.log("Prejšnji čas",$("#id-ura"+idrow).text());
                $("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
                console.log("Novi čas",$(".cas"+idrow).val());
            }
        });
    });
});

【讨论】：