Question

因此，过去几周我们一直在努力完成一个项目，简单的想法是为我们学校创建一个网站，用于发送和接收表单。此时，我们正在尝试创建管理员可以动态创建表单的页面，类似于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，但它带有所有的＆＃34;选项＆＃34;像我们添加到原始字段的复选框和文本字段，它不能以任何方式修改。任何有关这方面的建议都会受到赞赏，我们更喜欢纯JavaScript方法，但如果我们能够使用jQuery就可以了。

到目前为止，我已经测试过使用.clone函数克隆dynamicInput div，并且还尝试将新div添加到数组中，但程序没有任何功能。

Answer 1

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。

Answer 2

更新

添加了Plunk

<小时/> 此演示包含<input type='text'>，<textarea>，<input type='checkbox'>，<input type='radio'>和<select>组。它还会创建额外的<fieldset>。每个表单控件都有一个唯一的#id和匹配的[name]，每个单选按钮都有一个唯一的ID，但每个组都有一个公共[name]。

我没有选择<label>，我想如果你遵循这个模式，你应该能够把它作为一个简单的字符串添加。以下参考文献是使用的内容：

insertAdjacentHTML()

Template Literals

Event Delegation

HTMLFormControlsCollection

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>

创建页面以动态允许用户创建表单

2 个答案:

更新