表单提交后动态字段消失问题求助

我用HTML和JS制作了一个表单，整体功能正常，但通过JavaScript添加的新动态字段框会在表单提交后消失。

HTML代码 #

<form method="post" action="">
    <label for="headers">Product (optional):</label><br>
    <div id="key-value-fields">
        <label for="key1">Name: </label>
        <input type="text" id="key1" name="key1" value="<?php if (isset($_POST['key1'])) { echo $_POST['key1']; } ?>">
        <label for="value1">Quantity: </label>
        <input type="text" id="value1" name="value1" value="<?php if (isset($_POST['value1'])) { echo $_POST['value1']; } ?>">
    </div>
    <button type="button" id="add-another" onclick="addKeyValueField()">Add another</button>
    <input type="submit" value="Send Order">
</form>

JS代码 #

<script>
    var fieldIndex = 2;
    function addKeyValueField() {
        var keyValueFields = document.getElementById('key-value-fields');
        var newFields = document.createElement('div');
        newFields.innerHTML = '<label for="key' + fieldIndex + '">Name: </label> <input type="text" id="key' + fieldIndex + '" name="key' + fieldIndex + '"> <label for="value' + fieldIndex + '">Quantity: </label> <input type="text" id="value' + fieldIndex + '" name="value' + fieldIndex + '"> <button type="button" onclick="deleteKeyValueField(this)">Delete</button>';
        keyValueFields.appendChild(newFields);
        fieldIndex++;
    }
    function deleteKeyValueField(button) {
        var keyValueField = button.parentElement;
        keyValueField.remove();
    }
</script>

问题核心：动态字段是JS在客户端生成的DOM元素，表单提交后页面刷新，这些临时元素会被清除。必须通过后端接收数据后，在页面重新加载时把所有提交过的字段重新渲染出来。

步骤1：修改PHP逻辑，动态渲染所有字段 #

把原固定的第一个字段改成动态生成，同时遍历所有提交的keyN和valueN字段，生成对应的输入框：

<form method="post" action="">
    <label for="headers">Product (optional):</label><br>
    <div id="key-value-fields">
        <?php
        // 收集所有提交的字段数据
        $fields = [];
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            foreach ($_POST as $name => $value) {
                if (preg_match('/^key(\d+)$/', $name, $matches)) {
                    $index = $matches[1];
                    $fields[$index] = [
                        'key' => $value,
                        'value' => $_POST['value' . $index] ?? ''
                    ];
                }
            }
            // 无提交数据时默认生成第一个字段
            if (empty($fields)) {
                $fields[1] = ['key' => '', 'value' => ''];
            }
        } else {
            // 首次加载默认显示第一个字段
            $fields[1] = ['key' => '', 'value' => ''];
        }

        // 循环生成所有字段
        foreach ($fields as $index => $data) {
            ?>
            <div>
                <label for="key<?= $index ?>">Name: </label>
                <input type="text" id="key<?= $index ?>" name="key<?= $index ?>" value="<?= htmlspecialchars($data['key']) ?>">
                <label for="value<?= $index ?>">Quantity: </label>
                <input type="text" id="value<?= $index ?>" name="value<?= $index ?>" value="<?= htmlspecialchars($data['value']) ?>">
                <?php if ($index > 1): ?>
                    <button type="button" onclick="deleteKeyValueField(this)">Delete</button>
                <?php endif; ?>
            </div>
            <?php
        }

        // 计算下一个字段的起始索引
        $nextIndex = !empty($fields) ? max(array_keys($fields)) + 1 : 2;
        ?>
    </div>
    <button type="button" id="add-another" onclick="addKeyValueField()">Add another</button>
    <input type="submit" value="Send Order">
</form>

步骤2：调整JS代码，同步后端索引 #

把JS里的fieldIndex初始值改成后端生成的$nextIndex，避免新增字段时索引重复：

<script>
    // 从PHP获取下一个字段的起始索引
    var fieldIndex = <?= $nextIndex ?>;
    function addKeyValueField() {
        var keyValueFields = document.getElementById('key-value-fields');
        var newFields = document.createElement('div');
        newFields.innerHTML = '<label for="key' + fieldIndex + '">Name: </label> <input type="text" id="key' + fieldIndex + '" name="key' + fieldIndex + '"> <label for="value' + fieldIndex + '">Quantity: </label> <input type="text" id="value' + fieldIndex + '" name="value' + fieldIndex + '"> <button type="button" onclick="deleteKeyValueField(this)">Delete</button>';
        keyValueFields.appendChild(newFields);
        fieldIndex++;
    }
    function deleteKeyValueField(button) {
        var keyValueField = button.parentElement;
        keyValueField.remove();
    }
</script>

关键注意点 #

• 用htmlspecialchars()转义输入值，防止XSS攻击和HTML解析错误。
• 后端遍历所有提交的keyN字段，确保所有动态添加的字段在页面刷新后都能恢复显示。
• 动态计算fieldIndex初始值，避免新增字段时重复使用已有的索引。

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