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

Question

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

我有代码工作，没有添加第二行。 如果您将表单保留为默认值，则会检索所有$变量以供控制器对其执行操作。 我设法从网上获得了一些Javascript代码，正确地添加了输入表单的第二部分，但是，我假设代码会增加“name”字段，以便第一批货物名称=长度，第二批货物将是名称=长度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));
    }

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

Answer 1

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

Answer 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";
}

Answer 3

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

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