动态生成输入项的表单无法正确填充SQL数据库问题

核心问题 #

1. 数据库插入逻辑错误：当前PHP循环每次执行INSERT会插入多行记录，每行仅填充一组produitX/prixX/descriptionX字段，其余对应字段为空，但需求是将所有动态输入组填充到同一行的produit0-9/prix0-9/description0-9字段中。
2. JS索引不连续：初始输入组索引为0，但JS初始x=1，点击添加时直接生成produit[2]，跳过索引1，导致PHP接收的数组索引断层，部分字段无法匹配填充。
3. 表单容器缺失：JS指定的承载容器#inputContainer在原表单中不存在，新增输入组无法正确插入表单。
4. 提交按钮缺失：原表单无name="Submit"的提交按钮，导致PHP中isset($_POST['Submit'])无法触发处理逻辑。

修正后的代码 #

1. 表单代码（修复容器与提交按钮） #

<form action="processor.php" method="post" name="form1">
    <!-- 新增容器用于承载动态输入组 -->
    <div id="inputContainer">
        <div class="form-group">
            <input type="text" name='produit[0]' placeholder="Produit">
            <input type="text" name='prix[0]' placeholder="Prix">
            <input type="text" name='description[0]' placeholder="Description">
        </div>
    </div>

    <button type="button" id="addInput">ADD</button>
    <!-- 新增提交按钮 -->
    <input type="submit" name="Submit" value="提交">
</form>

2. JS脚本（修复索引连续问题） #

$(document).ready(function() {
    var maxInputs = 10;
    var addButton = $("#addInput");
    var wrapper = $("#inputContainer");

    var x = 1; // 初始已有索引0的输入组，下一组索引为1
    
    $(addButton).click(function(e) {
        e.preventDefault();
        if (x < maxInputs) {
            // 直接用x作为索引，添加后自增
            $(wrapper).append(
                '<div class="form-group"><input type=\'text\' name=\'produit[' + x + ']\' placeholder=\'Produit\'> <input type=\'text\' name=\'prix[' + x + ']\' placeholder=\'Prix\'> <input type=\'text\' name=\'description[' + x + ']\' placeholder=\'Description\'><a href=\'#\' class=\'removeField\'>Remove</a></div>'
            );
            x++;
        }
    });
    
    $(wrapper).on("click", ".removeField", function(e) {
        e.preventDefault();
        $(this).parent("div").remove();
        x--;
    });
});

3. PHP处理代码（改为单条INSERT填充所有字段） #

<?php
if(isset($_POST['Submit'])) { 
    $cie_id = $_POST['cie_id'];
    $adresse = $_POST['adresse'];
    $cont_name = $_POST['cont_name'];
    $cie_name = $_POST['cie_name'];
    $status = $_POST['status'];
    $note_int = $_POST['note_int'];
    $note_ext = $_POST['note_ext'];
    $note_sys = $_POST['note_sys'];
    $due_date = $_POST['due_date'];    

    if(empty($cie_name)) {
        echo "<font color='red'> error  </font><br/>";
    } else {
        $columns = "";
        $values = "";

        // 遍历所有动态输入组，拼接字段和值
        foreach ($_POST['produit'] as $key => $produit) {
            // 跳过空输入组
            if(empty($produit) && empty($_POST['prix'][$key]) && empty($_POST['description'][$key])) continue;
            
            $produit_column = "produit" . $key;
            $prix_column = "prix" . $key;
            $description_column = "description" . $key;

            // 拼接字段
            $columns .= ", $produit_column, $prix_column, $description_column";
            // 转义值防止SQL注入
            $produit = mysqli_real_escape_string($mysqli, $produit);
            $prix = mysqli_real_escape_string($mysqli, $_POST['prix'][$key]);
            $description = mysqli_real_escape_string($mysqli, $_POST['description'][$key]);
            // 拼接值
            $values .= ", '$produit', '$prix', '$description'";
        }

        // 构造完整INSERT语句
        $sql = "INSERT INTO list (cie_id, cie_name, adresse, cont_name, status, note_int, note_ext, note_sys, due_date $columns) 
                VALUES ('$cie_id', '$cie_name', '$adresse', '$cont_name',  '$status', '$note_int', '$note_ext', '$note_sys', '$due_date' $values)";
        
        mysqli_query($mysqli, $sql);

        header("Location: page.php#anyid");
    }
}
?>

额外建议 #

• 强化SQL安全：上述代码用mysqli_real_escape_string做基础防护，更安全的方式是使用预处理语句彻底避免SQL注入。
• 索引整理（可选）：若用户删除中间输入组导致索引断层，可在JS移除后重新遍历输入组，重置每个输入的name属性索引，确保索引从0开始连续。

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