HTML 表单：操作页面看不到使用 JS 动态添加的元素

Question

我写了一个代码来用js在表单中添加动态元素。 当我提交数据时，操作页面说该元素的索引未定义我有这个表格：

    <form action="testRicetta.php" method= "POST" >
     [...]
     <ul id ="passi" >
        <li id ="li_passo0">
        <div class="row">
          <div class="col-25">
            <label for="descrizione">Passo 0</label>
          </div>
          <div class="col-75">
            <textarea id="passo0" name="passo0" placeholder="Descrivi 
            il passo" style="height:100px" required ></textarea>
            <input type="file" id="immagine_0" name="immagine" >
          </div>
        </div>
       </li>
     </ul>
<button id="addMore" >Aggiungi passo</button>

这是 js 代码，其中出现了按钮的侦听器 #addMore

   var passi = 1;
   $(function() {
   $("#addMore").click(function(e)
    {
        e.preventDefault();
        $("#passi").append(`<li id ="li_passo"`+passi+`>
            <div class="row">
              <div class="col-25">
                <label for="passo"`+passi+`>Passo `+passi+`</label>
              </div>
              <div class="col-75">
                <textarea id="passo"`+passi+` name="passo"`+passi+` 
              placeholder="Descrivi il passo" style="height:100px" 
            required ></textarea>
                <input type="file" id="immagine_"`+passi+` 
             name="immagine" >
              </div>
            </div>
        </li>`);
        passi++;
    },
    $('.sel').chosen());
     })

操作页面：

   echo $_POST{passo0];
   echo $_POST{passo1];

结果：

         Notice: Undefined index: passo1 

此外，是否可能在循环中读取数据？ 我试过这个

     for($i = 0; isset($_POST['passo'+$i]);$i++)
         echo $_POST['passo'+$i];

但是我收到此错误：

   Warning: A non-numeric value encountered in (the loop)

那么我如何读取这些数据，以及如何通过循环来读取呢？

Answer 1

当您添加新字段时，您将 passi 变量值连接在名称name="passo"'+passi+'之外，它应该是name="passo'+passi+'" 。

尝试：

   var passi = 1;
   $(function() {
   $("#addMore").click(function(e)
    {
        e.preventDefault();
        $("#passi").append('<li id ="li_passo"'+passi+'>
            <div class="row">
              <div class="col-25">
                <label for="passo"'+passi+'>Passo '+passi+'</label>
              </div>
              <div class="col-75">
                <textarea id="passo"'+passi+' name="passo'+passi+'" 
              placeholder="Descrivi il passo" style="height:100px" 
            required ></textarea>
                <input type="file" id="immagine_"'+passi+' 
             name="immagine" >
              </div>
            </div>
        </li>');
        passi++;
    },
    $('.sel').chosen());
     })

然后：

   echo $_POST[passo0];
   echo $_POST[passo1];