创建一个页面以动态允许用户创建表单
Creating a page to dynamically allow user to create forms
所以过去几周我们一直在为一个项目苦苦挣扎，简单的想法是为我们学校创建一个网站，用于发送和接收表格。在这一点上，我们正在尝试创建管理员可以动态创建表单的页面，类似于 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，但是它带有我们添加到原始字段的所有 "options" 之类的复选框和文本字段，并且不能以任何方式修改它。对此有任何建议，我们将不胜感激，我们更喜欢纯 JavaScript 方法，但如果我们能让它工作，jQuery 也可以。
到目前为止，我已经测试过使用 .clone 函数克隆 dynamicInput div，并且还尝试将新的 div 添加到数组中，但程序没有任何功能。
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').innerHTML;
document.body.appendChild(newdiv);
}
<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>
你错过了一个 innerHTML。
更新
添加了一个Plunk
此 Demo 制作 <input type='text'>、<textarea>、<input type='checkbox'>、<input type='radio'> 和 <select> 组。它还会创建额外的 <fieldset> 。每个表单控件都有一个唯一的#id 和匹配的 [name]，每个单选按钮都有一个唯一的 ID，但每个组都有一个通用的 [name]。
我没有将 <label> 作为一个选项，我想如果您遵循这个模式，您应该能够将它作为一个简单的字符串添加进去。以下参考是使用的内容：
var formA = document.forms[0];
var formB = document.forms[1];
var ui = formA.elements;
var base = formB.elements;
formA.addEventListener('change', selectTag);
formA.addEventListener('click', addFieldset);
function selectTag(e) {
var rad = `s${document.querySelector('.rad:checked').value}`;
var fst = base[rad];
var qty;
var ask;
var idx = -1;
if (e.target.id === "sel") {
idx = parseInt(e.target.value, 10);
}
switch (idx) {
case 0:
var ID0 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var input = `<input id="t${ID0}" name="t${ID0} type="text">`;
fst.insertAdjacentHTML('beforeend', input);
break;
case 1:
var ID1 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var textArea = `<textarea id="ta${ID1}" name="ta${ID1}"></textarea>`;
fst.insertAdjacentHTML('beforeend', textArea);
break;
case 2:
var ID2 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var check = `<input id="ch${ID2}" name="ch${ID2}" type='checkbox' value=''>`;
fst.insertAdjacentHTML('beforeend', check);
break;
case 3:
var ID3 = Math.round(new Date().valueOf() / 3000000 + performance.now());
ask = prompt('Enter the number of radio buttons needed');
var rads = [];
qty = parseInt(ask, 10);
var name = ID3 + Math.floor(Math.random() * 11) + 10;
for (let i = 0; i < qty; i++) {
var radio = `<input id="r${ID3+i}" name="r${name}" type='checkbox' value=''>`;
rads.push(radio);
fst.insertAdjacentHTML('beforeend', radio);
}
break;
case 4:
var ID4 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var select = `<select id="s${ID4}" name="s${ID4}"></select>`;
ask = prompt('Enter the number of options needed');
qty = parseInt(ask, 10);
fst.insertAdjacentHTML('beforeend', select);
var sel = document.getElementById('s' + ID4);
for (let i = 0; i < qty; i++) {
var opt = document.createElement('option');
sel.add(opt);
}
break;
default:
break;
}
}
function addFieldset(e) {
if (e.target.id === 'addSet') {
var sets = formB.querySelectorAll('fieldset').length;
var fs = `
<fieldset id='s${sets}'>
<legend>${sets}</legend>
</fieldset>`;
formB.insertAdjacentHTML('beforeend', fs);
var rad = `
<input id='r${sets}' name='rad' class='rad' type='radio' value='${sets}'>
<label for='r${sets}'>${sets}</label>`;
ui.addSet.insertAdjacentHTML('beforebegin', rad);
}
}
<form id='ui'>
<fieldset id='set'>
<legend>Create Form</legend>
<select id='sel'>
<option>Pick a Field</option>
<option value='0'>Text Box</option>
<option value='1'>Text Area</option>
<option value='2'>Checkbox</option>
<option value='3'>Radio Group</option>
<option value='4'>Select</option>
</select>
<input id='r0' name='rad' class='rad' type='radio' value='0' checked>
<label for='r0'>0</label>
<input id='r1' name='rad' class='rad' type='radio' value='1'>
<label for='r1'>1</label>
<input id='r2' name='rad' class='rad' type='radio' value='2'>
<label for='r2'>2</label>
<input id='r3' name='rad' class='rad' type='radio' value='3'>
<label for='r3'>3</label>
<button id='addSet' type='button'>Add Fieldset</button>
</fieldset>
</form>
<form id='base'>
<fieldset id='s0'>
<legend>0</legend>
</fieldset>
<fieldset id='s1'>
<legend>1</legend>
</fieldset>
<fieldset id='s2'>
<legend>2</legend>
</fieldset>
<fieldset id='s3'>
<legend>3</legend>
</fieldset>
</form>
所以过去几周我们一直在为一个项目苦苦挣扎，简单的想法是为我们学校创建一个网站，用于发送和接收表格。在这一点上，我们正在尝试创建管理员可以动态创建表单的页面，类似于 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，但是它带有我们添加到原始字段的所有 "options" 之类的复选框和文本字段，并且不能以任何方式修改它。对此有任何建议，我们将不胜感激，我们更喜欢纯 JavaScript 方法，但如果我们能让它工作，jQuery 也可以。
到目前为止，我已经测试过使用 .clone 函数克隆 dynamicInput div，并且还尝试将新的 div 添加到数组中，但程序没有任何功能。
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').innerHTML;
document.body.appendChild(newdiv);
}
<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>
更新
添加了一个Plunk
此 Demo 制作
<input type='text'>、<textarea>、<input type='checkbox'>、<input type='radio'> 和 <select> 组。它还会创建额外的 <fieldset> 。每个表单控件都有一个唯一的#id 和匹配的 [name]，每个单选按钮都有一个唯一的 ID，但每个组都有一个通用的 [name]。
我没有将 <label> 作为一个选项，我想如果您遵循这个模式，您应该能够将它作为一个简单的字符串添加进去。以下参考是使用的内容：
var formA = document.forms[0];
var formB = document.forms[1];
var ui = formA.elements;
var base = formB.elements;
formA.addEventListener('change', selectTag);
formA.addEventListener('click', addFieldset);
function selectTag(e) {
var rad = `s${document.querySelector('.rad:checked').value}`;
var fst = base[rad];
var qty;
var ask;
var idx = -1;
if (e.target.id === "sel") {
idx = parseInt(e.target.value, 10);
}
switch (idx) {
case 0:
var ID0 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var input = `<input id="t${ID0}" name="t${ID0} type="text">`;
fst.insertAdjacentHTML('beforeend', input);
break;
case 1:
var ID1 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var textArea = `<textarea id="ta${ID1}" name="ta${ID1}"></textarea>`;
fst.insertAdjacentHTML('beforeend', textArea);
break;
case 2:
var ID2 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var check = `<input id="ch${ID2}" name="ch${ID2}" type='checkbox' value=''>`;
fst.insertAdjacentHTML('beforeend', check);
break;
case 3:
var ID3 = Math.round(new Date().valueOf() / 3000000 + performance.now());
ask = prompt('Enter the number of radio buttons needed');
var rads = [];
qty = parseInt(ask, 10);
var name = ID3 + Math.floor(Math.random() * 11) + 10;
for (let i = 0; i < qty; i++) {
var radio = `<input id="r${ID3+i}" name="r${name}" type='checkbox' value=''>`;
rads.push(radio);
fst.insertAdjacentHTML('beforeend', radio);
}
break;
case 4:
var ID4 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var select = `<select id="s${ID4}" name="s${ID4}"></select>`;
ask = prompt('Enter the number of options needed');
qty = parseInt(ask, 10);
fst.insertAdjacentHTML('beforeend', select);
var sel = document.getElementById('s' + ID4);
for (let i = 0; i < qty; i++) {
var opt = document.createElement('option');
sel.add(opt);
}
break;
default:
break;
}
}
function addFieldset(e) {
if (e.target.id === 'addSet') {
var sets = formB.querySelectorAll('fieldset').length;
var fs = `
<fieldset id='s${sets}'>
<legend>${sets}</legend>
</fieldset>`;
formB.insertAdjacentHTML('beforeend', fs);
var rad = `
<input id='r${sets}' name='rad' class='rad' type='radio' value='${sets}'>
<label for='r${sets}'>${sets}</label>`;
ui.addSet.insertAdjacentHTML('beforebegin', rad);
}
}
<form id='ui'>
<fieldset id='set'>
<legend>Create Form</legend>
<select id='sel'>
<option>Pick a Field</option>
<option value='0'>Text Box</option>
<option value='1'>Text Area</option>
<option value='2'>Checkbox</option>
<option value='3'>Radio Group</option>
<option value='4'>Select</option>
</select>
<input id='r0' name='rad' class='rad' type='radio' value='0' checked>
<label for='r0'>0</label>
<input id='r1' name='rad' class='rad' type='radio' value='1'>
<label for='r1'>1</label>
<input id='r2' name='rad' class='rad' type='radio' value='2'>
<label for='r2'>2</label>
<input id='r3' name='rad' class='rad' type='radio' value='3'>
<label for='r3'>3</label>
<button id='addSet' type='button'>Add Fieldset</button>
</fieldset>
</form>
<form id='base'>
<fieldset id='s0'>
<legend>0</legend>
</fieldset>
<fieldset id='s1'>
<legend>1</legend>
</fieldset>
<fieldset id='s2'>
<legend>2</legend>
</fieldset>
<fieldset id='s3'>
<legend>3</legend>
</fieldset>
</form>