使用 Javascript 添加一行额外的 HTML 表单输入答案

【问题标题】：Adding an additional row of HTML form inputs using Javascript使用 Javascript 添加一行额外的 HTML 表单输入
【发布时间】：2019-05-16 15:01:23
【问题描述】：

我正在尝试将新的 HTML 表单输入行（包括 6 个输入的新行，即（类型（下拉）、长度、宽度、高度、重量和数量）动态添加到现有的“视图”HTML 中使用 Javascript 的表单。然后通过 PHP $_POST 请求在我的控制器文件中访问当前的 HTML 表单输入。这可以通过检索 HTML 表单中的“名称”字段来正常工作。因此，用户完成了第一行，其中 id 用于运送一个包裹，并且他们想要添加第二个包裹，因此，他们单击添加（或删除）以添加或删除额外的输入行。

我的代码在没有添加第二行的情况下工作。如果您将表单保留为默认值，则会检索所有 $variables 以便控制器对其进行操作。我设法从网上获取了一些 Javascript 代码，它正确地添加了输入表单的第二部分，但是，我假设代码会增加“名称”字段，以便第一批货物是 name=length，第二批货物是名称=长度2。该代码也需要 Bootstrap 才能正常工作。我有 PHP、HTML 技能，但 Javascript 技能有限，因此请提出我的要求。

    $(document).ready(function() {
        var counter = 0;

        $("#addrow").on("click", function() {
            var newRow = $("<tr>");
            var cols = "";

            <!--cols += '<td><select class="form-control col-md-8" id="packaging_type" name="packaging_type' + counter + '"/></td>';-->

            cols += '<td><input type="text" class="form-control" name="length' + counter + '"/></td>';
            cols += '<td><input type="text" class="form-control" name="width' + counter + '"/></td>';
            cols += '<td><input type="text" class="form-control" name="height' + counter + '"/></td>';
            cols += '<td><input type="text" class="form-control" name="weight' + counter + '"/></td>';
            cols += '<td><input type="text" class="form-control" name="quantity' + counter + '"/></td>';

            cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
            newRow.append(cols);
            $("table.order-list").append(newRow);
            counter++;
        });

        $("table.order-list").on("click", ".ibtnDel", function(event) {
            $(this).closest("tr").remove();
            counter -= 1
        });

    });

    function calculateRow(row) {
        var price = +row.find('input[name^="price"]').val();

    }

    function calculateGrandTotal() {
        var grandTotal = 0;
        $("table.order-list").find('input[name^="price"]').each(function() {
            grandTotal += +$(this).val();
        });
        $("#grandtotal").text(grandTotal.toFixed(2));
    }

最终，一旦我点击了“添加行”并输入了所有输入，我希望脚本以数字方式递增 HTML 表单的“名称”输入，然后能够通过 PHP $_POST 访问它们。如果有更好的方法，我愿意接受建议。

【问题讨论】：

使用您的实际代码，当您添加一行时，该新行中输入的名称是什么？

标签： javascript php html bootstrap-4

【解决方案1】：

这无论如何都行不通，我建议使用 guid 而不是计数器，因为在最后一行之前删除一行会导致计数器将自身设置为与当前最后一行相同的数字。

【讨论】：

【解决方案2】：

function myFunction() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(3); 
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "NEW CELL1";
      cell2.innerHTML = "NEW CELL2";
}

【讨论】：

【解决方案3】：

我设法找到了一个可以自定义的脚本，它似乎可以解决我的问题。我将在完成后发布结果，以便它可以帮助任何未来的用户。脚本链接位于：- https://www.jqueryscript.net/demo/Duplicate-Input-Fields-jQuery-Repeatable/

基本上这个脚本是做什么的，它允许你在表格或表单中复制 DIV，并增加索引、“名称”、“id”等。我将使用它在表单上动态添加额外的“输入”。

【讨论】：