我正在进行一项实验,试图制作一个动态联系表单。目标是让用户通过点击按钮添加和移除地址,并指示其类型。
我注意到使用 innerHTML
时,已经包含值的表单在每次使用新的添加或移除时都会丢失其值。这似乎是 innerHTML
的本质,(此答案 帮助我了解了问题所在,并指出了 appendChild
)。
然而,我不知道如何添加一个复杂的元素,例如包含多个文本输入和一个按钮的 <div>
。有没有办法实现与我正在做的相同的效果,或者在不使用 JQuery 的情况下防止其他表格丢失输入值?
我已经尝试为此创建了一个 MCVE,这里是它,还附带了 JS Fiddle 以节省时间。
工作的 JS Fiddle 在这里:JSFiddle
var targetOutput = document.getElementById("myForm");
var addressOutput = document.getElementById("addresses");
var requiredAddress = 1;
addressRemoveButton = `<input type="button" value="Remove" name="address" onclick="removeDiv(this)">`;
addressMolecule = `<div class="content"><label>Type:</label>		<input type="text" name="address['type'][]"><br>
<label>Address Line 1:</label><input type="text" name="address['line1'][]"><br>
<label>Address Line 2:</label><input type="text" name="address['line2'][]"><br>
<label>City:</label><input type="text" name="address['city'][]"><br>
<label>State:</label><input type="text" name="address['state'][]"><br>
<label>Zipcode:</label><input type="text" name="address['zipcode'][]"><br>`
window.onload = function(event) {
myFun('window');
}
function myFun(a) {
var i;
for (i = 0; i < requiredAddress; i++) {
addAddress(false);
//alert("Max: " + maxAddress + "Current: " + addressCount);
}
}
function removeDiv(e) {
e.parentNode.removeChild(e.previousSibling);
e.parentNode.removeChild(e);
}
function addAddress(removable = true) {
addressOutput.innerHTML += addressMolecule;
if (removable == true) {
addressOutput.innerHTML += addressRemoveButton;
}
addressOutput.innerHTML += `</div>`;
}
<body onload="myFun('body')">
<form name="myForm" id="myForm">
<div id="addresses">
<input type="button" id="addressButton" value="Add More" name="address" onclick="addAddress()">
</div>
</form>
</body>