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

Posted 2023-03-05

【中文标题】动态生成的字段和数据在提交后保留

【英文标题】：Dynamic generated fields and data remain after submission

【发布时间】：2017-08-31 19:05:19

【问题描述】：

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

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

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

我尝试使用此代码为选择标记保留值，但没有奏效。

这是我的示例代码。

BOOTPLY

希望你能帮助我，谢谢。

【问题讨论】：

您应该有一个服务器端 api 来将数据发布到它并将其存储在您的数据库中

对不起，先生，我不知道该怎么做。我从另一个线程中了解到我可以使用本地存储，但是它太复杂了。

【参考方案1】：

假设您不想设置服务器来存储此信息，那么您在这里只剩下几个选项。具体来说，客户端存储。我将介绍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

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

希望这会有所帮助，祝你好运！

【参考方案2】：

如果您想为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 是重复的。可能会引起误解。

【参考方案3】：

所以提交后，你的$_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...

希望这会有所帮助。

【参考方案4】：

如果您按照以下代码异步提交代码，所有动态字段的值将保留。

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

【参考方案5】：

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

加载表单并生成动态字段（您已经这样做了） 发布表单并将其保存在服务器中（使用 PHP/mysql 或其他服务器脚本） 在编辑模式下加载表单，您可以从数据库中获取保存的数据，并在此基础上生成加载时的动态字段，因为您已经拥有数据库中的所有数据

如果有帮助，请告诉我。

【讨论】：

谢谢先生的帮助，但如果出现错误，我需要查看我所有的数据，然后才能将其保存到数据库中。

您可以通过AJAX发布表单进行保存，即使返回错误也可以返回带有表单数据的响应，因此如果遇到错误，您可以显示错误并加载数据。