JS动态添加表单元素后PHP接收不到数据及循环读取问题

1. 为什么动态添加的passo1提示Undefined index？ #

你的JS代码里错误混合了**模板字符串（反引号）**和传统+拼接变量的写法，导致生成的HTML中name属性格式完全不符合预期。比如当passi=1时，实际生成的name会是passo"1"（而非你想要的passo1），PHP自然找不到passo1这个索引。

修复JS代码：

改用模板字符串原生的${变量名}语法插入变量，彻底避免拼接错误：

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>
            <!-- 注意：多文件上传要把name设为数组，否则只会保留最后一个文件 -->
            <input type="file" id="immagine_${passi}" name="immagine[]">
          </div>
        </div>
      </li>
    `);
    passi++;
  });
  $('.sel').chosen();
});

2. 如何正确用PHP循环读取所有passo数据？ #

你的PHP循环犯了两个错误：一是用+做字符串拼接（PHP中字符串拼接必须用.），二是循环条件的写法容易出问题。

修复后的循环写法：

// 从0开始遍历，直到找不到对应索引的passo
for ($i = 0; isset($_POST['passo' . $i]); $i++) {
    echo $_POST['passo' . $i] . '<br>';
}

更优雅的方案：使用表单数组 #

其实没必要给每个步骤设置passo0、passo1这类带编号的name，直接把name设为数组形式passo[]，PHP会自动将所有步骤的内容收集到$_POST['passo']数组里，处理起来更灵活：

修改JS中的textarea name：

<textarea id="passo${passi}" name="passo[]" placeholder="Descrivi il passo" style="height:100px" required></textarea>

对应的PHP处理代码：

// 直接遍历数组即可，无需关心编号
if (isset($_POST['passo']) && is_array($_POST['passo'])) {
    foreach ($_POST['passo'] as $index => $passo) {
        echo "Passo " . ($index + 1) . ": " . $passo . '<br>';
    }
}

这种方式不管你添加多少个步骤，都能自动全部获取，完全不用手动维护索引编号。

关于文件上传的额外提示 #

你当前的文件输入name="immagine"，如果添加多个文件，只会提交最后一个。要支持多文件上传，必须把name设为immagine[]（如上面JS代码里的修改），之后PHP可以通过$_FILES['immagine']数组获取所有上传文件的信息。

内容的提问来源于stack exchange，提问作者Christian