使用Javascript创建动态表单

时间:2016-09-30 13:42:43

标签: javascript

让我们重新开始,

我想循环几个值,然后将它们附加到表单以显示一个选择框,

这是我在HTML中添加新字段的按钮:

<input type="button" value="Add Field" onclick="addField()">

然后是addField Javascript:

 function addField() {
 var input = document.createElement('input');
 input.setAttribute('type', 'text');
 input.setAttribute('name', "newDrop[]");
 input.setAttribute('id', 'newDrop');
 input.setAttribute('class', 'newDrop');
 input.setAttribute('placeholder', 'Options');
 document.getElementById('dropdown').appendChild(input);
 };

正如您所看到的,这将附加一个包含上述属性的新表单。 一旦我对每个字段中的值感到满意,并使用以下HTML提交其他字段:

<input type="button" value="Create Field"  onclick="addInput('dynamicInput')">

我希望创建一个动态创建的选择,其中包含我在字段中添加的详细信息。

我想要发生的是,我可以遍历值并使用在字段中输入的值创建选项。我的Javascript是这样的:

function addInput(divName) {
  //other case here
  case 'dropdown':
  myInputs[counter]['atts'] = [];
  myInputs[counter]['atts']['label']    =          document.getElementById('fieldDropDownLabel').value
  myInputs[counter]['atts']['one']  =      document.getElementsByName('newDrop[]')
  break;
  }
  var dd = document.createElement('select');
  //other cases go here
  case 'dropdown':
  var label = document.createElement('label');
  label.textContent = myInputs[counter]['atts']['label'];
  label.setAttribute('for', myInputs[counter]['atts']['label']);
  label.setAttribute('id', 'dropdown');
  f.appendChild(label);
  dd.setAttribute('name', myInputs[counter]['atts']['label'])
  //default option
  var option = document.createElement('option');
  option.text = 'Please Select';
  option.value = '';
  dd.add(option, dd.options[null]);
  //additional options
  var option1 = document.createElement('option')
  var newDrop = myInputs[counter]['atts']['one']
  for(i=0; i < newDrop.length; i++)
  {
    option1.text = myInputs[counter]['atts']['one'];
    option1.value = myInputs[counter]['atts']['one'];
    dd.add(option1, dd.options[null]);
  }
  counter++;
  f.appendChild(dd);
    break;

我无法获取要在选项中显示的值。希望这比上一篇文章好。有人可以帮忙吗?

由于

0 个答案:

没有答案