Динамически добавлять/удалять поля формы

Question

Я пытаюсь добавить и, надеюсь, удалить после добавления работ некоторые поля измерений в форму, когда пользователь нажимает кнопку, а затем вводит в базу данных mysql. Но я застрял в получении чего-либо дисплей.

Javascript:

var counter = 0; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes; 
    for (var i=0;i<newField.length;i++) { 
     var theName = newField[i].name; 
     if (theName) 
      newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
} 

window.onload = moreFields; 

HTML:

 <div id="readroot" style="display: none"> 
     <p>Quantity<input type="text" name="iQuantity" size="3"> 
Weight(kg)<input type="text" name="iWeight"size="4"> Length(cm)<input type="text" name="iLength"size="4"> * Width(cm)<input type="text" name="iWidth"size="4"> * Height(cm)<input type="text" name="iHeight"size="4"></div> 
    <span id="writeroot"></span> 

    <input type="button" value="Add another text input" onClick="moreFields();"> 

Любая помощь очень ценится, благодаря

Answer 1

Ваш JavaScript для создания элементов работ. То, как вы добавляете события, может быть улучшено. Вот как я бы уточнил ваш код JavaScript:

var counter = 0; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 

    var newField = newFields.childNodes; 
    for (var i = 0; i < newField.length; i++) { 
     var theName = newField[i].name; 
     if (theName) newField[i].name = theName + counter; 
    } 

    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields, insertHere); 
} 

if (window.addEventListener) { 
    window.addEventListener('load', moreFields, false); 
} else if (window.attachEvent) { 
    window.attachEvent('onload', moreFields); 
} 

var el = document.getElementById('clicker') 

if (el.addEventListener) { 
    el.addEventListener("click", moreFields, false); 
} else { 
    el.attachEvent('onclick', moreFields); 
} 

И ваш HTML-код может быть улучшен. Здесь я закрыл теги и теперь работает.

<div id="readroot" style="display:none;"> 
    <p>Quantity 
     <input type="text" name="iQuantity" size="3" />Weight(kg) 
     <input type="text" name="iWeight" size="4" />Length(cm) 
     <input type="text" name="iLength" size="4" />* Width(cm) 
     <input type="text" name="iWidth" size="4" />* Height(cm) 
     <input type="text" name="iHeight" size="4" /> 
    </p> 
</div> 
<div id="writeroot"></div> 
<input id="clicker" type="button" value="Add another text input" />