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> 

в яваскрипте

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