动态添加的表单input提交后PHP报Undefined array key问题求助

我在实现动态添加输入行并提交到MySQL数据库的功能，首行必填，通过HTML创建了表单和首行输入框，用按钮的addEventListener动态追加更多行。DOM节点运行正常，但提交表单时只有静态首行的数据能被POST到后端，动态添加的行出现「Undefined array key」错误。

相关代码 #

myJsFile.js #

document.getElementById('add_row').addEventListener('click',function(e){

 var my_tbody = document.querySelector('.my_tbodyClass');
 var my_tr = document.createElement('tr');
 my_tbody.appendChild(my_tr);

 var my_div = document.createElement('div');

 var my_td = document.createElement('td');
 var my_input = document.createElement('INPUT');
 my_input.setAttribute('type','number');
 my_input.setAttribute('name','myRows[]');

 my_tr.appendChild(my_td);
 my_div.appendChild(my_input);

 my_td.appendChild(my_div);


});

myphpFile.php #

function execute_dynamicRow()
{
    global $dbConnection;
    if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submitedDynamicRows'])) {

        $myRows = $_POST['myRows'];
        $myRowsSerialized = serialize($myRows);

        $stmt = mysqli_prepare($dbConnection, "INSERT INTO all_dynamic_rows(dynamic_rows) VALUES(?)");
        $stmt_bind_param = mysqli_stmt_bind_param($stmt, 's', $myRowsSerialized);
        $stmt_execute = mysqli_stmt_execute($stmt);

        mysqli_stmt_close($stmt);

        if (!$stmt) {
            die("Query Error " . mysqli_error($dbConnection));
        }
    }
}

myform.php #

<?php myform(); ?>
                        
<form method="post">
  <table class="table table-flush">
    <thead> 
      <tr>
        <th class="text-uppercase text-secondary">Add You Number</th>
        <th class="text-uppercase text-secondary">Add Row</th>
      </tr>
    </thead>
    <tbody class="my_tbodyClass">
      <tr>
        <td>
            <div>
              <input type="number" name="myRows[]">
            </div>
        </td>
        <td>
          <button class="btn btn-icon btn-3" id="add_row" type="button">
            <span class="btn-inner--text">Add New Row</span>
          </button>
        </td>
      </tr>                                
   </tbody>
  </table>
 <div class="input-group input-group-outline my-3">
  <input type="submit" name="submitedDynamicRows" class="btn btn-info" value="Add Tax Slab">
 </div>
</form>

问题原因及解决办法 #

核心问题是动态创建输入框时，setAttribute设置name属性存在兼容性隐患，导致动态输入框的表单数据未被正确提交。同时PHP端缺少容错判断，加剧了错误出现的概率。

解决步骤 #

1. 修改JS输入框属性赋值方式
   将setAttribute替换为直接赋值属性，更稳定可靠：

   document.getElementById('add_row').addEventListener('click',function(e){
       var my_tbody = document.querySelector('.my_tbodyClass');
       var my_tr = document.createElement('tr');
       my_tbody.appendChild(my_tr);
   
       var my_div = document.createElement('div');
   
       var my_td = document.createElement('td');
       var my_input = document.createElement('input'); // 改用小写标签，符合规范
       my_input.type = 'number';
       my_input.name = 'myRows[]'; // 直接赋值name属性
   
       my_tr.appendChild(my_td);
       my_div.appendChild(my_input);
       my_td.appendChild(my_div);
   
       // 可选：添加第二个<td>保持表格结构一致，避免布局错乱
       var btn_td = document.createElement('td');
       my_tr.appendChild(btn_td);
   });
   

2. 完善首行必填校验
   给静态行输入框添加required属性，确保首行必填：

   <input type="number" name="myRows[]" required>
   

3. PHP端增加容错与数据过滤
   避免空数据或未提交数据导致的错误，同时过滤无效空值：

   function execute_dynamicRow()
   {
       global $dbConnection;
       if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submitedDynamicRows'])) {
   
           // 校验数据是否存在且为数组
           if (!isset($_POST['myRows']) || !is_array($_POST['myRows'])) {
               die("未提交有效数据");
           }
   
           $myRows = $_POST['myRows'];
           // 过滤空值，避免插入无效数据
           $myRows = array_filter($myRows, function($val) {
               return !empty($val);
           });
   
           if (empty($myRows)) {
               die("至少需要提交一个有效数字");
           }
   
           $myRowsSerialized = serialize($myRows);
   
           $stmt = mysqli_prepare($dbConnection, "INSERT INTO all_dynamic_rows(dynamic_rows) VALUES(?)");
           if (!$stmt) {
               die("Query Error " . mysqli_error($dbConnection));
           }
           mysqli_stmt_bind_param($stmt, 's', $myRowsSerialized);
           mysqli_stmt_execute($stmt);
           mysqli_stmt_close($stmt);
       }
   }
   

关键说明 #

• 直接赋值表单元素属性比setAttribute兼容性更好，能避免部分浏览器解析问题。
• PHP端的容错处理可以提前拦截无效请求，避免Undefined错误。
• 过滤空值能保证数据库中只存储有效数据。

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