用于动态输入的JavaScript和HTML表单

javascript and html form for dynamic input

本文关键字：HTML 表单 JavaScript 动态 输入 用于      更新时间：2023-09-26

您好，我想使用用于提交的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"));
    }
}

但不工作我采取错误小提琴

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

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

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"));
    }
} 
<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>

如果您对上面的源代码有任何疑问，请在下面发表评论，我会尽快回复。

我希望这有所帮助。祝您编码愉快！

代码笔

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

单击父

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

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"));
  }
}
form span {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  padding:2px;
}
<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>

相关文章：