Question

你好我想创建一个动态输入字段编号，使用html表单提交，javascript用于动态输入。

以html格式

<form action="" method="post" name="detParameterForm">
<fieldset class="det">
<legend>Closure Level</legend>
Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
<div id="container"/>
</fieldset>
<button type="submit" value="Submit">submit</button>
</form>

在javascript中

function addinputFields(){
    var number = document.getElementById("member").value;
    for (i=0;i<number;i++){
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

但不行，我接受了错误 fiddle

Answer 1

我已在更新的源代码中添加了注释，这应该适合您。

更改： event.preventDefault(); 和 parseInt() 。

＆＃13;

function addinputFields(){
  // Disable Default Action (Form Posting)
  event.preventDefault(); 
  // parseInt() - The value entered should be a number / integer
    var number = parseInt(document.getElementById("member").value);
    for (i=0;i<number;i++){
        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

＆＃13;

<form action="" method="post" name="detParameterForm">
<fieldset class="det">
<legend>Closure Level</legend>
Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
<div id="container"/>
</fieldset>
<button type="submit" value="Submit">submit</button>
</form>

＆＃13;

如果您对上述源代码有任何疑问，请在下面留言，我会尽快回复。

我希望这会有所帮助。快乐的编码！

CodePen

Answer 2

首先，你应该得到一个Container对象。然后使用变量容器appendChild唤起。它可以工作

Answer 3

单击button父级后代的form元素将提交form。尝试将span元素替换为button，并将样式span显示为button，以防止在form事件上提交click

＆＃13;

function addinputFields() {
  var number = document.getElementById("member").value;
  for (i = 0; i < number; i++) {
    var input = document.createElement("input");
    input.type = "text";
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }
}

＆＃13;

form span {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  padding:2px;
}

＆＃13;

<form action="" method="post" name="detParameterForm">
  <fieldset class="det">
    <legend>Closure Level</legend>
    Number of members:
    <input type="text" id="member" name="member" value="">
    <br />
    <span id="btn" onclick="addinputFields()">Button</span>
    <div id="container" />
  </fieldset>
  <button type="submit" value="Submit">submit</button>
</form>

＆＃13;

用于动态输入的javascript和html表单

3 个答案: