Question

我正在尝试将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访问它们。如果有更好的方法，我欢迎您提出建议。

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，并增加索引，“名称”，“ id”等。我将使用它在表单上动态添加其他“输入”。

使用Javascript添加另一行HTML表单输入

3 个答案: