Question

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

我的问题是我不知道如何制作我添加的字段以及提交后该字段的数据。

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

我尝试使用此代码使select标记保留值但不起作用。

这是我的示例代码。

BOOTPLY

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

Answer 1

Assuming you don't want to set up a server to store this info, you're left with only a few options here. Specifically, client-side storage. I'll cover localStorage as it's the easiest to use and you've mentioned it above.

Here's the localStorage API. If you believe that the interface is too complicated, I would recommend giving it a read through, perhaps along with a tutorial (Personally I believe the Mozilla Docs to be better but this tut looks more applicable for your application).

In short, you will be making use of the setItem(...) and getItem(...) methods.

localStorage.setItem("My test key", "My test value");

console.log(localStorage.getItem("My test key")); // --> My test value

So, for your application, I would recommend creating an object to store your values in and then appending said object to 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);

Now for retrieving state when the user comes back your website.

// 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
}

This is a very brief intro here and I would encourage you to carefully read the docs on this stuff before publishing it to a production-ready site.

Hope this helps && good luck!

Answer 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是重复的。这可能会引起误解。

Answer 3

提交后，您已经拥有了$_POST。

中的数据

现在，您只需遍历$_POST数组并创建所有select＆amp;事先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 4

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

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

Answer 5

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

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

如果有帮助，请告诉我。

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

5 个答案: