如何添加动态表单元素但保留其值(JS）

How do I add dynamic form elements but keep their values (JS)

本文关键字：保留 JS 元素 动态 何添加 添加 表单      更新时间：2023-09-26

如何简单地添加动态表单元素并保留其值？在使用我当前的方法添加输入时，它不会将任何键入的信息传递到字段中（已删除的现有信息：请参阅底部的fiddle）。我认为问题是如何添加新的输入document.getElementById("add_ac").innerHTML += str;

我已经找到了添加动态表单元素的其他方法，但它们似乎过于复杂。有人知道解决问题的简单方法吗？

如果你不能告诉我我不经常用JS或后端代码，那真的只是在寻找一个干净简单的解决方案。已经看了谷歌和堆栈。

任何真正的帮助都将是伟大的！

<div id="add_ac">
  <input type="text" name="c[]" placeholder="Add comment..."/><br />
</div>
<button id="add_ac_btn">+</button>
<div id="add_ai">
  <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />
</div>  
<button id="add_ai_btn">+</button>

JS-

document.getElementById('add_ac_btn').onclick = function add_new_ac(){
  var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />';
  document.getElementById("add_ac").innerHTML += str;
}
document.getElementById('add_ai_btn').onclick = function add_new_ai(){
 var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />';
document.getElementById("add_ai").innerHTML += str;

}

js小提琴：https://jsfiddle.net/fsdbpxoo/

使用insertAdjacentHTML作为innerHTML +=将重新插入容器中的所有DOM。

insertAdjacentHTML()将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树的指定位置。它不会重新分析正在使用的元素，因此不会损坏元素内的现有元素。这一点，以及避免额外的序列化步骤，使其比直接的innerHTML操作快得多。

位置"'beforeend'"：就在元素内部，在其最后一个子元素之后

document.getElementById('add_ac_btn').onclick = function add_new_ac() {
  var str = '<input type="text" name="c[]" placeholder="Add comment..."/><br />';
  document.getElementById("add_ac").insertAdjacentHTML("beforeend", str);
}
document.getElementById('add_ai_btn').onclick = function add_new_ac() {
  var str = '<input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> <input type="text" name="cai[]" placeholder="Add comment..."/><br />';
  document.getElementById("add_ai").insertAdjacentHTML("beforeend", str);
}
<div id="add_ac">
  <input type="text" name="c[]" placeholder="Add comment..." />
  <br />
</div>
<button id="add_ac_btn">+</button>
<div id="add_ai">
  <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" />
  <input type="text" name="cai[]" placeholder="Add comment..." />
  <br />
</div>
<button id="add_ai_btn">+</button>

您需要追加新元素，而不仅仅是替换完整内容。使用.appendChild()函数：

document.getElementById('add_ac_btn').onclick = function add_new_ac() {
  var wrapper = document.getElementById('add_ac');
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'c[]';
  newInput.placeholder = 'Add comment...';
  wrapper.appendChild(newInput);
  wrapper.appendChild(document.createElement('br'));
}
document.getElementById('add_ai_btn').onclick = function add_new_ac() {
  var wrapper = document.getElementById('add_ai');
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'tai[]';
  newInput.placeholder = 'Add triggers, separated by commas';
  wrapper.appendChild(newInput);
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'cai[]';
  newInput.placeholder = 'Add comment...';
  wrapper.appendChild(newInput);
  wrapper.appendChild(document.createElement('br'));
}
<div id="add_ac">
  <input type="text" name="c[]" placeholder="Add comment..." />
  <br />
</div>
<button id="add_ac_btn">+</button>
<div id="add_ai">
  <input type="text" name="tai[]" placeholder="Add triggers, separated by commas" />
  <input type="text" name="cai[]" placeholder="Add comment..." />
  <br />
</div>
<button id="add_ai_btn">+</button>

Hi使用clone方法复制表单元素并插入父节点。我更改了你的代码。。。

HTML

<div id="add_ac">
  <div id="duplicater">
    <input type="text" name="c[]" placeholder="Add comment..."/>
  </div>
</div>
<button id="add_ac_btn">+</button>
<div id="add_ai">
  <div id="duplicetorSec">
    <input type="text" name="tai[]" placeholder="Add triggers, separated by commas"/> 
    <input type="text" name="cai[]" placeholder="Add comment..."/>
  </div>
</div>  
<button id="add_ai_btn">+</button>

JS代码：

<script>
var i = 0;
var k = 0;
var original = document.getElementById('duplicater');
var originalSec = document.getElementById('duplicetorSec');
function duplicate(){
  var clone = original.cloneNode(true); // "deep" clone
  i = ++i;
  clone.id = "duplicetor"+ i; // there can only be one element with  an ID
  original.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function duplicateSec(){
  var clone = originalSec.cloneNode(true); // "deep" clone
  console.log(clone);
  k = ++k;
  clone.id = "duplicetorSec"+ k; // there can only be one element with  an ID
  originalSec.parentNode.appendChild(clone);
  clearCloneElement(clone.id);
}
function clearCloneElement(id){ 
  var divId = '#'+id;
  $(divId).find("input[type^='text']").each(function() {
    $(this).val('');
  });
}
document.getElementById('add_ac_btn').onclick = function add_new_ac(){
  duplicate();
}
document.getElementById('add_ai_btn').onclick = function add_new_ac(){
    duplicateSec();
}
</script>

请看这里演示

必须在页面的标题中包含JQuery文件

您应该尝试使用JQuery的append（）方法，或者按照普通JS的方式构造一个节点，然后使用appendChild（）添加它。

相关文章：