Ajax 表单在应该提交新信息时向数据库提交相同的信息

Posted 2023-05-09

【中文标题】Ajax 表单在应该提交新信息时向数据库提交相同的信息

【英文标题】：Ajax form submitting same information to database when it should be submitting new information

【发布时间】：2021-08-15 02:49:51

【问题描述】：

我有一个表单，其中包含输入组，用户填写该表单以将信息添加到我的数据库中的表中。当他们单击添加按钮时，它会在不重新加载页面的情况下提交表单，然后创建一个新的空白表格行以在用户需要时添加更多信息。但是，当我在单击时生成的新行中输入数据并再次单击添加按钮以提交新数据时，它会忽略该数据，而是再次提交以前的数据。我不确定如何设置 ajax 调用以使其正常工作。非常感谢任何建议！

这是ajax调用和点击按钮时创建新表格行的方法。

const cloneRow = $('#tableData tbody tr').first();

    $('#addRow').click(function(e) 
        e.preventDefault();
        let data = 
         project_id: $("#project_id").val(),
         imp_or_ann: $("#imp_or_ann").val(),
         category: $("#category").val(),
         cost: $("#cost").val(),
         hours: $("#hours").val()
    
        $.ajax(
            url: '/costs_hours',
            type: 'POST',
            data: data
        ).then(
            cloneRow.clone().appendTo('#tableData tbody')
        )

    )

这是我的 html 页面。我希望能够使用页面底部的按钮添加新数据，但它总是提交以前的数据而不是输入到动态生成的表格行中的新数据。

<form id="formData" action='/costs_hours' method="POST">
        <h1 class="text-center mb-3">Costs and Hours</h1>
        <div class="card border-secondary w-100 text-light" style="background-color: #333f48">

            <div class="card-body w-100 text-end">
                <table class="table text-light text-center mt-3">
                    <thead>
                        <tr>
                            <th scope="col">Project ID</th>
                            <th scope="col">Implementation or Annual</th>
                            <th scope="col">Category</th>
                            <th scope="col">Costs</th>
                            <th scope="col">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="input-group mb-3">
                                    <input id="project_id" name="project_id" type="text" class="form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select id="imp_or_ann" name="imp_or_ann" class="form-select"
                                            id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>Implementation</option>
                                            <option>Annual</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select id="category" name="category" class="form-select"
                                            id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>EMO</option>
                                            <option>Analysts</option>
                                            <option>Maintenance</option>
                                            <option>ETS</option>
                                            <option>BOT</option>
                                            <option>OtherUT</option>
                                            <option>Materials</option>
                                            <option>Non-UT Contract</option>
                                            <option>Contingency</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input id="cost" name="cost" type="text" class="form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input id="hours" name="hours" type="text" class="form-control">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button id='addRow' type="button" style="background-color: #bf5700;"
                    class="btn btn-warning text-light">Add</button>
            </div>
        </div>
    </form>

这是数据库中数据的示例。第二行应该与第一行不同，因为我输入了不同的数据，但它只是复制相同的数据而不是发布新数据。

"Test"  "Implementation"    "EMO"   1   1   285
"Test"  "Implementation"    "EMO"   1   1   286

【参考方案1】：

您已在输入中添加了 ID。对于第一个条目，只有一行，所以效果很好。然后，您的代码会克隆该行（包括 ID）。代码仍在按 ID 搜索数据，但现在有 2 组具有相同 ID 的输入。找到一个随机的（第一个）。

您可以使用类并查找类的最后一个条目来检索值，而不是使用 ID。

$(".project_id").last().val()