javascript和html格式的動態輸入

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

首先，你應該得到的容器對象。然後使用變量容器appendChild喚醒。並且它可以工作

Answer 2

單擊一個button元素後代form家長將提交form。嘗試替代span元素button和造型span顯示爲button，以防止提交form上click事件

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>

Answer 3

我添加註釋到更新的源代碼，這應該找到您。

變化：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>

如果您對源代碼的任何問題，上述請在下面發表評論，我會盡快回復。

我希望這會有所幫助。快樂的編碼！

CodePen