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

我正在一个窗体中，我有一个动态的字段，我可以添加和删除输入和下拉字段。动态生成的字段和数据提交后仍然保留

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

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

我试过这个代码的选择标记保持值，但没有奏效。

这里是我的示例代码。

BOOTPLY

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

来源

2017-04-06 Mark Gerryl Mirandilla

你应该有一个服务器端的API POST数据并将其存储在您的数据库 –

对不起，先生，我不知道该怎么做..我从其他线程学习我可以使用localstorage，但它也是复杂。 –

假设您不想设置服务器来存储此信息，则只剩下几个选项。具体来说就是客户端存储。我会覆盖localStorage，因为它是最容易使用的，你已经在上面提到过了。

这是localStorage API。如果您认为界面过于复杂，我会建议给它一个通读，也许还有一个tutorial（我个人认为Mozilla文档更好，但这个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 
}

这是一个非常简要介绍在这里，我会鼓励你把它发布到生产就绪的网站之前，请仔细阅读这些东西的文档。

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

来源

2017-04-10 00:23:24

谢谢先生您的帮助，我会读你的所有建议.. –

如果你想为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是重复的。这可能会导致误解。

来源

2017-04-10 17:19:06

谢谢先生，我试试吧 –

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

希望这会有所帮助。

来源

2017-04-11 11:06:53 TipuZaynSultan

谢谢先生，我试试吧 –

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

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

来源

2017-04-13 21:56:09

我认为你需要有选择的值以及所有动态域提交表单后，也可以按照下面的步骤来实现相同的：

负载形式并生成动态域（你已经做到了）
帖子的形式，并将其保存在服务器（使用PHP/MySQL或其他服务器脚本）在编辑模式下
加载表单，你从数据库中保存的数据，并基于这一点，你可以生成负载上的动态字段为y ou已经有来自数据库的所有数据

让我知道它是否有帮助。

来源

2017-04-15 06:29:15

谢谢先生的帮助，但我需要看到我所有的数据仍然存在在将它保存到数据库之前有一个错误。 –

您可以通过AJAX发布表单进行保存，并返回带有表单数据的响应，即使它返回错误，所以如果出现错误，您可以显示错误并加载数据。 –

我明白了..好吧，先生，我会那样做的。谢谢 –

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

回答

相关问题