How can I pass values from javascript to PHP using the form of bootstrap that adds & removes rows dynamically?

问题: I have downloaded this form from this website bootsnipp which adds & removes rows dynamically from the form. I want to pass the whole data from the form to the PHP in...

问题:

I have downloaded this form from this website bootsnipp enter image description here which adds & removes rows dynamically from the form. I want to pass the whole data from the form to the PHP in order to print them. The names of my inputs texts are generated automatically as name, name1,name2 etc... .

Html code

  <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 Code

  <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>

I have tried this piece of code to pass the values but it didn't work for me. Can anyone help, please? 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;
}
}  
}

?>

回答1:

Something like this;

(I did'nt test it, but if some error occurs, you should be able to fix it :) )

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

<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;
    }
}
  • 发表于 2018-07-09 16:24
  • 阅读 ( 324 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除