在表单中动态添加输入（无法在 PHP 中获取值）答案

【问题标题】：Dynamically add inputs in a form ( can't get values in PHP )在表单中动态添加输入（无法在 PHP 中获取值）
【发布时间】：2015-08-04 03:48:34
【问题描述】：

我有一个巨大的表格，里面有一张桌子。当用户按下某个按钮并尝试在 PHP 中捕获所有这些值时，我使用 jQuery 添加该表的行

但除了表格的第一行，我无法得到其他值！

知道了

未定义索引：类别#2

当我试图通过$_POST['categorie#2']得到它时

HTML 看起来像这样：

<form>
  ...[some working inputs]
<table id="matos" class="table table-responsive synthese">
              <thead>
                <tr>
                  <th>Matériel</th>
                  <th>Fournisseur</th>
                  <th>Numéro de série</th>
                  <th>Catégorie</th>
                  <th>Description</th>
                  <th>Date d'achat</th>
                  <th>Etat</th>
                </tr>
              </thead>
              <tbody>
                <tr class="" id="ligne#1">
                  <td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
                  <td>
                      <select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
                          <?php
                            $list = listing_fournisseurs();
                            foreach ($list as $key => $value) 
                            {
                              echo '<option value='.$key.'>'.$value.'</option>';
                            }

                            ?>
                      </select>
                  </td>
                  <td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
                  <td>
                      <select name="categorie#1" id="categorie#1" class="form-control" value="">
                          <?php

                            $list = listing_categories();
                            foreach ($list as $key => $value) {
                              echo ' <option value='.$key.'>'.$value.'</option>';
                            }
                          ?>
                      </select>
                  </td>
                  <td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
                  <td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
                  <td>
                    <select name="etat#1" id="etat#1" class="form-control" value="">
                      <?php

                            $list = listing_etats();
                            foreach ($list as $key => $value) {
                              echo ' <option value='.$key.'>'.$value.'</option>';
                            }
                          ?>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>

如何在 jQuery 中添加一行？

var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;
$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
                            '<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
                              opt_fournisseurs+
                            '</select></td>'+
                            '<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
                              opt_categories+
                            '</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
                            '<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
                               opt_states+
                            '</select></td></tr>');
$('#nbLignes').val(num);

我正在尝试使用 PHP：

$_POST['materiel#2'] // doesn't work
$_POST['materiel#1'] // works ! ( because first line ! )

我读过一些问题，如果它们不在 table tr td 中，表格就不起作用......但就我而言，它们是......有什么问题？

【问题讨论】：

如果你检查 jquery 添加的材料输入框的名称而不是你得到的？？
当您转储 (var_dump()) $_POST 中的值时会发生什么？您是否看到默认情况下不存在的任何其他类别或值？
打印你的 $_POST，你就会明白哪里出了问题。
是的，我得到了所有的 '#1' 但我得到了其他行的错误Undefined index: [nameOfInput]#NumberOfLine...好像数据不会发送
@Seba99 优点是您不必跟踪数字（categorie#1、materiel#2）等。它只是将具有该名称的所有内容转换为具有索引的数组。看看这个答案以获得一个明确的用法示例：stackoverflow.com/a/1010970/1294864

标签： javascript php jquery html

【解决方案1】：

如果您使用此命名约定 <input name="category[]" /> 而不是 <input name="category#1" />，您将使您的生活更轻松

这样您就可以在 PHP 端的数组中获取变量，这使得遍历数据更容易！

例如：

<?php
foreach($_POST['categories'] as $num => $value){

}
?>

【讨论】：

是的，这就是@Bono 在评论中所说的，但这不是真正的问题，无论如何都是好建议 :)

【解决方案2】：

我的错在这里！我只是搞砸了我的 DOM 结构...... 你不应该关闭你在<form> 之前打开的div，在</form> 结束之前打开，这就是为什么！

不起作用：

<div id="some_div">
  <form>
    [Some inputs...]
</div><!-- /some_div -->
  </form>

应该可以：

<div id="some_div">
  <form>
    [Some inputs...]
  </form>
</div><!-- /some_div -->

看起来很明显，但当你有一个非常大的 DOM 时不是;)

【讨论】：

【解决方案3】：

var opt_fournisseurs = '<option value="gg">gg</option><option value="dd">dd</option>';
              var opt_categories = '<option value="ss">ss</option><option value="aa">aa</option>';
              var opt_states = '<option value="ww">ww</option><option value="ee">ee</option>';

              var num= parseInt($('#matos tr:last').prop("id").split('#')[1])+1;

$('#matos tr:last').after('<tr id="ligne#'+num+'">'+
                            '<td><input type="text" name="materiel#'+num+'" id="materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="fournisseur#'+num+'" id="fournisseur#'+num+'" class="form-control" value="">'+
                              opt_fournisseurs+
                            '</select></td>'+
                            '<td><input type="text" name="num_serie#'+num+'" id="num_serie#'+num+'" class="form-control" value=""></td>'+
                            '<td><select name="categorie#'+num+'" id="categorie#'+num+'" class="form-control" value="">'+
                              opt_categories+
                            '</select></td><td><input type="text" name="description_materiel#'+num+'" id="description_materiel#'+num+'" class="form-control" value=""></td>'+
                            '<td><input type="text" name="buy_date#'+num+'" id="buy_date#'+num+'" class="date form-control" value=""></td>'+
                            '<td><select name="etat#1" id="etat#1" class="form-control" value="">'+
                               opt_states+
                            '</select></td></tr>');
$('#nbLignes').val(num);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?php
  var_dump($_POST);

?>
<form method="post">

<table id="matos" class="table table-responsive synthese">
              <thead>
                <tr>
                  <th>Matériel</th>
                  <th>Fournisseur</th>
                  <th>Numéro de série</th>
                  <th>Catégorie</th>
                  <th>Description</th>
                  <th>Date d'achat</th>
                  <th>Etat</th>
                </tr>
              </thead>
              <tbody>
                <tr class="" id="ligne#1">
                  <td><input type="text" name="materiel#1" id="materiel#1" class="form-control" value=""></td>
                  <td>
                      <select name="fournisseur#1" id="fournisseur#1" class="form-control" value="">
                         <option value="one">one</option>
                         <option value="two">two</option>
                      </select>
                  </td>
                  <td><input type="text" name="num_serie#1" id="num_serie#1" class="form-control" value=""></td>
                  <td>
                      <select name="categorie#1" id="categorie#1" class="form-control" value="">
                          <option value="1">1</option>
                         <option value="2">2</option>
                      </select>
                  </td>
                  <td><input type="text" name="description_materiel#1" id="description_materiel#1" class="form-control" value=""></td>
                  <td><input type="text" name="buy_date#1" id="buy_date#1" class="date form-control" value=""></td>
                  <td>
                    <select name="etat#1" id="etat#1" class="form-control" value="">
                      <option value="1a">1a</option>
                         <option value="2a">2a</option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
            <input type="submit" name="txtsubmit" value="submit"/>

这是根据您提供的代码创建的示例，对我有用。

【讨论】：

嗯，这对我也有用...... x) 但我的 DOM 有点复杂......我想发布我的整个源，但是有没有办法在一些 JS 之后获取源操作（如选项卡中的新行），因为使用 CTRL+UI 只需获取 js 操作之前的内容......通过 chrome 检查器，我得到了很多 ::after 或 ::after 我应该发布我的 DOM 吗？