首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用bootstrap动态添加和删除行的形式将值从javascript传递到PHP?

如何使用bootstrap动态添加和删除行的形式将值从javascript传递到PHP?
EN

Stack Overflow用户
提问于 2018-07-08 04:30:01
回答 1查看 32关注 0票数 1

我已经从这个网站下载了这个表格bootsnipp

它动态地在表单中添加和删除行。我想将表单中的所有数据传递给PHP,以便打印它们。我输入的文本的名称会自动生成为name、name1、name2等。。

Html代码

代码语言:javascript
复制
  <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代码

代码语言: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

代码语言:javascript
复制
  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;
}
}  
}

?>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-08 04:50:22

像这样的东西;

(我没有测试它,但如果发生错误,您应该能够修复它:)

HTML

代码语言:javascript
复制
<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>

脚本

代码语言:javascript
复制
<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

代码语言:javascript
复制
<?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;
    }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51226748

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档