我正在处理一个表单，其中有一个动态字段，我可以在其中添加和删除输入和下拉字段。
我的问题是我不知道如何使我添加的字段以及该字段上的数据在提交后保留。
<script type="text/javascript">
document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>";
</script>
我尝试使用此代码为选择标记保留值，但没有奏效。
这是我的示例代码。
希望你能帮助我，谢谢。
【问题讨论】：
标签： javascript jquery
假设您不想设置服务器来存储此信息，那么您在这里只剩下几个选项。具体来说，客户端存储。我将介绍localStorage，因为它是最容易使用的，而且您在上面已经提到过。
这是localStorage API。如果您认为界面过于复杂，我建议您通读一遍，也许还可以加上tutorial（我个人认为 Mozilla Docs 更好，但这个 tut 看起来更适合您的应用程序）。
简而言之，您将使用setItem(...) 和getItem(...) 方法。
localStorage.setItem("My test key", "My test value");
console.log(localStorage.getItem("My test key")); // --> My test value
因此，对于您的应用程序，我建议创建一个对象来存储您的值，然后将所述对象附加到 localStorage。
var state = {}
// Get values from your form however you feel fit
values = getValues(...);
function setValues(values) {
// Do this for all the values you want to save
state.values = values
// Continues for other values you want to set...
}
// Save values to localStorage
localStorage.setItem("Application_State", state);
现在用于在用户返回您的网站时检索状态。
// Application_State is null if we have not set the state before
var state = localStorage.getItem("Application_State") || {};
function updateValues() {
values = state.values;
// Render your values to the UI however you see fit
}
这是一个非常简短的介绍，我建议您在将其发布到可生产的网站之前仔细阅读有关这些内容的文档。
希望这会有所帮助，祝你好运！
【讨论】：
如果您想为select 输入设置值，只需将所需的option 设置为selected：
var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage option").each(function(){
if($(this).val()===myValue)
$(this).prop('selected',true);
});
this answer中提到的另一种方式：
var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage").val("val2");
重要的一点是，当您克隆某个部分并再次附加它时，某些元素似乎具有重复的id。例如tonnage id 是重复的。可能会引起误解。
【讨论】：
所以提交后，你的$_POST中已经有了数据。
现在您只需遍历 $_POST 数组并预先创建所有 select 和 input 字段行。
我猜你已经在这样做了，你的问题是在其中填充数据。
# Set a json array variable.
var tonnages = <?php echo json_encode($_POST['tonnage']) ?>;
var tablesize = ...
# Do the same for others...
# Now just loop through the select fields.
$("select[name='tonnage[]']").each(function(i, el) {
$(el).val(tonnages[i]);
});
$("select[name='tablesize[]']").each(function(i, el) {
...
});
# Do the same for others...
希望这会有所帮助。
【讨论】：
如果您按照以下代码异步提交代码，所有动态字段的值将保留。
$().ready(function () {
$('form').submit(function () {
$.post($(this).attr('action'), $(this).serialize(), function (result) {
console.log(result);
});
return false;
});
});
【讨论】：
我认为即使在您提交表单之后，您也需要拥有所有动态字段以及选定的值，您可以按照以下步骤来实现：
如果有帮助，请告诉我。
【讨论】：