在Web表单开发场景中，用户经常需要根据实际需求动态添加输入框，比如添加多个联系人信息、多条商品规格等。但表单提交后如果页面刷新，动态生成的输入框和已填写的内容往往会消失，需要重新填写，影响操作效率。通过PHP与JavaScript的协同配合，可以实现动态生成输入框提交后值的持久化，让页面刷新后仍能保留之前的操作状态。
核心实现思路
整个流程分为三个核心环节：首先通过JavaScript实现动态添加和删除输入框的功能，然后表单提交时将动态输入框的数据传递给PHP后端，PHP接收数据后通过隐藏域或者重新输出数据的方式回传，最后JavaScript在页面加载时读取回传的数据，重新生成对应的输入框并填充数值。
动态生成输入框的JavaScript实现
首先实现基础的动态添加输入框功能，每个动态输入框都带有统一的name前缀，方便后端批量接收数据。
// 动态添加输入框
let inputIndex = 0;
function addInput() {
inputIndex++;
const container = document.getElementById('dynamic_input_container');
const inputGroup = document.createElement('div');
inputGroup.className = 'input-group';
inputGroup.innerHTML = `
<input type="text" name="dynamic_input[]" placeholder="请输入内容" class="dynamic-input">
<button type="button" onclick="removeInput(this)">删除</button>
`;
container.appendChild(inputGroup);
}
// 删除动态输入框
function removeInput(btn) {
btn.parentElement.remove();
}
PHP接收与回传数据
表单提交后，PHP通过$_POST或$_GET接收动态输入框的数据，然后将数据以JSON格式或者数组形式回传到前端页面，这里使用隐藏域存储回传数据的方式。
<?php
// 接收动态输入框提交的数据
$savedInputs = [];
if (isset($_POST['dynamic_input'])) {
$submittedInputs = $_POST['dynamic_input'];
// 过滤空值
foreach ($submittedInputs as $val) {
if (!empty(trim($val))) {
$savedInputs[] = htmlspecialchars($val, ENT_QUOTES, 'UTF-8');
}
}
}
// 将保存的数据转为JSON字符串，存入隐藏域
$savedInputsJson = json_encode($savedInputs);
?>
在表单中添加一个隐藏域，用来存储PHP回传的动态输入框数据：
<form method="post" action="">
<div id="dynamic_input_container">
<!-- 动态输入框会在这里生成 -->
</div>
<button type="button" onclick="addInput()">添加输入框</button>
<input type="hidden" id="saved_inputs" value="<?php echo $savedInputsJson; ?>">
<button type="submit">提交</button>
</form>
页面加载时还原动态输入框
页面加载完成后，JavaScript读取隐藏域中的回传数据，解析后重新生成对应的动态输入框，并填充之前提交的数值。
// 页面加载完成后还原动态输入框
window.onload = function() {
const savedInputsStr = document.getElementById('saved_inputs').value;
if (savedInputsStr) {
try {
const savedInputs = JSON.parse(savedInputsStr);
// 先重置索引
inputIndex = 0;
const container = document.getElementById('dynamic_input_container');
container.innerHTML = '';
// 遍历保存的数据，生成对应的输入框
savedInputs.forEach(val => {
inputIndex++;
const inputGroup = document.createElement('div');
inputGroup.className = 'input-group';
inputGroup.innerHTML = `
<input type="text" name="dynamic_input[]" value="${val}" placeholder="请输入内容" class="dynamic-input">
<button type="button" onclick="removeInput(this)">删除</button>
`;
container.appendChild(inputGroup);
});
} catch (e) {
console.error('解析保存的数据失败', e);
}
}
};
注意事项
- PHP接收数据后需要做安全过滤，避免XSS攻击，这里使用了
htmlspecialchars函数处理输出内容。 - 动态输入框的name属性要使用数组形式，比如
dynamic_input[]，这样PHP才能接收到所有输入框的值。 - 如果动态输入框有多种类型，比如同时有文本输入框和下拉框，可以给不同类型的输入框添加不同的name前缀，后端分别接收处理。
- 如果页面需要支持更复杂的状态持久化，比如保留输入框的删除、排序状态，可以将更多状态信息一起存入JSON回传。
通过以上PHP与JavaScript的协同处理，就可以实现动态生成输入框提交后值的持久化，用户提交表单后即使页面刷新，之前添加的动态输入框和填写的内容都会保留，大幅提升表单操作的便捷性。
PHPJavaScript动态生成输入框值持久化修改时间：2026-07-23 10:36:27