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

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

我的问题是，我不知道如何使我添加的字段以及这些字段上的数据在提交后保留下来

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

document.getElementById（“吨位”）.value=“”；

我尝试了这段代码，让select标记保留值，但没有成功

这是我的示例代码

---

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

假设您不想设置服务器来存储此信息，您在这里只有几个选项。特别是客户端存储。我将介绍

localStorage

，因为它是最容易使用的，而且您已经在上面提到过

这是我的建议。如果您认为界面太复杂，我建议您通读一下，也许再加上一个（我个人认为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
}

这是一个非常简短的介绍，我鼓励你在发布到一个准备生产的网站之前仔细阅读这些文档

希望这有帮助&祝你好运
 如果要设置
选择
输入的值，只需将所需的
选项
设置为
所选
：

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

var myValue=”“；
$（“#吨位选项”）。每个（功能（）{
if（$（this）.val（）==myValue）
$（this.prop（'selected'，true）；
});

另一种方式如中所述：

var myValue=”“；
美元（“#吨”）.val（“val2”）；

重要的一点是，当您克隆某个部分并再次附加它时，某些元素似乎具有重复的
id
。例如，
吨位
id重复。这可能会引起误解。
因此提交后，您的
$\u帖子中已经有了数据

现在您只需在
$\u 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...

#设置json数组变量。
var吨位=；
var tablesize=。。。
#对其他人也一样。。。
#现在只需循环选择字段。
$（“选择[name='Tonts[]']”）。每个（功能（i，el）{
$（el.val）（吨[i]）；
});
$（“选择[name='tablesize[]']”）。每个（函数（i，el）{
...
});
#对其他人也一样。。。

希望这有帮助。
如果您按照下面的代码异步提交代码，则所有动态字段的值都将保留

    $().ready(function () {
        $('form').submit(function () {
            $.post($(this).attr('action'), $(this).serialize(), function (result) {
                console.log(result);
            });
            return false;
        });
    });

我认为，即使在提交表单后，您也需要所有动态字段以及选定的值，您可以按照以下步骤实现相同的效果：

加载表单并生成动态字段（您已经这样做了）
发布表单并将其保存在服务器中（使用PHP/MySQL或其他服务器脚本）
在编辑模式下加载表单，从数据库中获取保存的数据，并在此基础上生成加载时的动态字段，因为您已经拥有数据库中的所有数据
如果有帮助，请告诉我。
您应该有一个服务器端api将数据发布到其中并存储在数据库中。对不起，先生，我不知道怎么做。。我从另一个线程了解到我可以使用localstorage，但是它太复杂了。谢谢先生，我会尝试它谢谢先生，我会尝试它谢谢先生的帮助，但是在我将其保存到数据库之前，如果有错误，我需要查看我的所有数据是否保留。您可以通过AJAX发布表单以进行保存，并返回带有表单数据的响应，即使它返回了一个错误，因此如果出现错误，也可以显示错误并加载数据。
    $().ready(function () {
        $('form').submit(function () {
            $.post($(this).attr('action'), $(this).serialize(), function (result) {
                console.log(result);
            });
            return false;
        });
    });