javascript - 在表单中动态添加输入(无法在 PHP 中获取值)

Question

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

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

得到了

Undefined index: categorie#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 ! )

我读过一些问题，如果它们不在表 tr td 中，则 form 不起作用......但在我的情况下，它们是......出了什么问题？

Answer 1

我的错在这里!我只是搞砸了我的 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 时就不是这样了 ;)