【发布时间】：2018-09-01 15:14:24
【问题描述】：
过去几周我们一直在为一个项目苦苦挣扎，简单的想法是为我们的学校创建一个网站，用于发送和接收表格。此时，我们正在尝试创建管理员可以动态创建表单的页面，类似于 Google 表单。现在我们的 HTML 看起来像这样：
<HTML>
<HEAD>
<TITLE>Create Form</TITLE>
<link rel="stylesheet" type="text/css" href="login.css" />
<script type="text/javascript" src="createform.js"></script>
</HEAD>
<BODY>
<form method="POST">
<div id="dynamicInput">
<label for="fieldName">Name this field</label>
<input type="text" name="fieldName">
<br><br>
<SELECT name="element">
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
<OPTION value= "textarea">Text Area</option>
<OPTION value = "checkbox">Check Box</option>
</SELECT>
<input type="button" value="Add an option" onClick="addAllInputs('dynamicInput', document.forms[0].element.value);">
</div>
<br><br><br>
<input type = "button" value="Add another field" onClick = "addSec();">
<br><br>
</form>
</BODY>
</HTML>
我们的 JavaScript：
var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
var counter = 0;
function addAllInputs(divName, inputType){
var newdiv = document.createElement('div');
switch(inputType) {
case 'text':
newdiv.innerHTML = "Entry " +(counterText+1)+" <input type='text' name='myInputs[]'><br>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " +(counterRadioButton+1)+" <input type='radio' name='myRadioButtons[]'>";
counterRadioButton++;
break;
case 'checkbox':
newdiv.innerHTML = "Entry "+(counterCheckBox+1)+" <input type='checkbox' name='myCheckBoxes[]'>";
counterCheckBox++;
break;
case 'textarea':
newdiv.innerHTML = "Entry "+(counterTextArea+1)+" <textarea name='myTextAreas[]'>type here...</textarea>";
counterTextArea++;
break;
}
document.getElementById(divName).appendChild(newdiv);
}
function addSec(){
var newdiv = document.createElement('div');
var div = document.getElementById('dynamicInput').innerHTML;
newdiv.innerHTML = document.getElementById('dynamicInput');
document.body.appendChild(newdiv);
}
我们已经尝试了 AddSec 函数的许多不同迭代，它的目的是复制 HTML div，它构成一个表单字段。我们已经得到它来复制 div，但是它带有我们添加到原始字段中的所有“选项”，例如复选框和文本字段，并且不能以任何方式修改它。对此的任何建议都将不胜感激，我们更喜欢纯 JavaScript 方法，但如果我们能让它工作，jQuery 就可以了。
到目前为止，我已经测试了使用 .clone 函数来克隆 dynamicInput div，并且还尝试将新的 div 添加到数组中，但程序没有任何功能。
【问题讨论】：
-
那么想要的结果是什么？为什么重复的
<div>不能修改？ -
预期结果是 div 模板相同，但允许将更多条目选项添加到表单的该部分。例如，我可以让第一个字段用于名称，而只有一个用于名称的文本框。然后我想创建一个新字段，这个有四个复选框，它被称为本科级别。现在的问题是 .clone 方法将使用它拥有的任何选项复制原始字段，并且不能将新选项添加到新字段中。使用我现在拥有的 .innerHTML 方法，什么都没有发生。
-
您是否在
.clone中使用了深度克隆参数？为什么要将元素分配给.innerHTML？只能为其分配文本。你的意思是newdiv.innerHTML = div;？ -
是的，这就是我的意思。通过深度克隆，我认为这意味着将其设置为 true？如果是这样，是的，我遇到了同样的问题。
标签： javascript html forms clone customization