javascript - 如何使用动态添加和删除行的 Bootstrap 形式将值从 javascript 传递到 PHP？

Question

我已经从这个网站下载了这个表格bootsnipp 它从表单中动态添加和删除行。我想将整个数据从表单传递到 PHP 以便打印它们。我的输入文本的名称自动生成为名称、名称 1、名称 2 等...。

HTML代码

  <div class="container">
<table id="myTable" class=" table order-list">
<thead>
    <tr>
        <td>Name</td>
        <td>Gmail</td>
        <td>Phone</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-sm-4">
            <input type="text" name="name" class="form-control" />
        </td>
        <td class="col-sm-4">
            <input type="mail" name="mail"  class="form-control"/>
        </td>
        <td class="col-sm-3">
            <input type="text" name="phone"  class="form-control"/>
        </td>
        <td class="col-sm-2"><a class="deleteRow"></a>

        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
        </td>
    </tr>
    <tr>
    </tr>
</tfoot>
</table>
</div>

<form method="post">

<input type="submit" name="submit" value="submit" />


</form>

Javascript 代码

  <script>


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

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

          cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
          cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
          cols += '<td><input type="text" class="form-control" name="phone' + 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));
  }

  </script>

我试过这段代码来传递值，但它对我不起作用。有人可以帮忙吗？ PHP

  if(isset($_POST['submit']))
{
echo "<script> alert('inside submit');</script>"  ;
for($i =0 ; $i < 5 ; $i++)
{

if (isset($_POST['name' + $i])) {

$name = $_POST['name'+ $i];
echo $name;
}
}  
}

?>

Answer 1

类似这样的东西；

(我没有测试它，但如果出现错误，你应该能够修复它:))

HTML

<form method="post">
<div class="container">
    <table id="myTable" class=" table order-list">
        <thead>
            <tr>
                <td>Name</td>
                <td>Gmail</td>
                <td>Phone</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-sm-4">
                    <input type="text" name="name[]" class="form-control" />
                </td>
                <td class="col-sm-4">
                    <input type="mail" name="mail[]"  class="form-control"/>
                </td>
                <td class="col-sm-3">
                    <input type="text" name="phone[]"  class="form-control"/>
                </td>
                <td class="col-sm-2">
                    <a class="deleteRow"></a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" style="text-align: left;">
                    <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
                </td>
            </tr>
            <tr>
            </tr>
        </tfoot>
    </table>
</div>

<input type="submit" name="submit" value="submit" />

</form>

脚本

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

            cols += '<td><input type="text" class="form-control" name="name[]"/></td>';
            cols += '<td><input type="text" class="form-control" name="mail[]"/></td>';
            cols += '<td><input type="text" class="form-control" name="phone[]"/></td>';

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

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

    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));
    }
</script>

PHP

<?php
if(isset($_POST['submit']))
{
    echo "<script>alert('inside submit');</script>";
    foreach ($_POST['name'] as $i => $v)
    {
        $name  = $_POST['name'][$i]; // Or just $v;
        $email = $_POST['email'][$i];
        $phone = $_POST['phone'][$i];

        echo $name;
    }
}