提交后仍保留动态生成的字段和数据

Question

我正在处理一个表单，其中我有一个动态字段，我可以在其中添加和删除输入和下拉字段。

我的问题是我不知道如何使我添加的字段和该字段上的数据在提交后保留下来。

<script type="text/javascript">
  document.getElementById('tonnage').value = "<?php echo $_POST['tonnage'];?>";
</script>

我尝试使用这段代码使select标记保持值，但没有起作用。

这是我的示例代码。

自举

我希望你能帮助我，谢谢。

Answer 1

因此提交之后，您的$_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...

希望这有帮助。

Answer 2

如果要为选择输入设置值，只需将所需的选项设置为选择:

var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage option").each(function(){
   if($(this).val()===myValue)
     $(this).prop('selected',true);
});

这个答案中提到的另一种方式：

var myValue = "<?php echo $_POST['tonnage'];?>";
$("#tonnage").val("val2");

重要的一点是，当您克隆某个部分并再次追加它时，某些元素似乎具有重复的id。例如，tonnageid重复。可能会引起误会。

Answer 3

假设您不想设置一个服务器来存储这些信息，那么这里只剩下几个选项。具体地说，客户端存储。我将介绍localstorage，因为它最容易使用，您在上面已经提到了它。

这是localStorage API。如果您认为界面太复杂，我建议您通读一下，也许还可以附上一个教程（我个人认为Mozilla文档更好，但这个tut看起来更适合您的应用程序）。

简而言之，您将使用setitem(...)和getitem(...)方法。

LocalStorage.SetItem（“我的测试键”、“我的测试值”）；

console.log(localstorage.getitem（“我的测试密钥”））；//-->我的测试值

因此，对于您的应用程序，我建议创建一个对象来存储您的值，然后将该对象附加到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
}

这是一个非常简短的介绍，我鼓励您在将其发布到一个生产就绪的站点之前，仔细阅读有关这些内容的文档。

希望这有助于&&祝你好运！