Javascript?:How to dynamically add text inputs/form fields to a HTML form?

Question

I am building a web form where there is a list of inputs. So far, so good.

However, how can I add a link/button to add say another 5 fields to the list. eg:

<input>
<input>
<input>
<input>

<a href="" onclick="">Add 10 more fields</a>

I have looked through many similar q's on this site, however none seem to describe how to add multiple fields.

Thanks for any help,

Harley

EDIT: Thanks all for help, looks like jquery append is the way to go. However I appreciate the alternative that does not use jquery.

Answer 1

  $("#anyDiv").html('<input id="id1"/>');

....

 $("#anyDiv").append('<input id="id2"/>');

Answer 2

Here's a js fiddle showing the example of adding 10 inputs using jQuery's append() function. I suggest only doing one addition per click as in user1301840's example though.

HTML

<div id="inputList"></div>
<input type="button" value="Add 10 Inputs" id="addInputs" />​

Javascript

$('#addInputs').click(function() {
    for (i = 0; i < 10; i++) {
        $('#inputList').append('<input type="text" />');

    }
});​

Answer 3

While you already have answers, I thought I'd try and provide a non-jQuery solution:

function addInput(insertAt, formEl, num, inputType, defaultVal) {
    console.log(formEl);
    if (!formEl) {
        return false;
    }
    else {
        num = num ? num : 5;
        var fieldset = document.createElement('fieldset'),
            newInput;
        for (var i = 0; i < num; i++) {
            newInput = document.createElement('input');
            newInput.value = defaultVal || '';
            newInput.type = inputType || 'text';
            fieldset.appendChild(newInput);
        }
        formEl.insertBefore(fieldset, insertAt);
    }
}

var formEl = document.getElementById('theForm'),
    aElem = document.getElementById('aElement');

if (window.addEventListener) {
    // up to date browsers
    aElement.addEventListener('click', function() {
        addInput(this, formEl, 10);
    }, false);
} else if (window.attachEvent) {
    // legacy IE, <9
    aElement.attachEvent('onclick', function() {
        addInput(this, formEl);
    });
}​

JS Fiddle demo.

I don't have IE to test, but the above should work with IE < 9 using the attachEvent fall-back, and >= 9, I think, implements the standard addEventListener().

References:

• addEventListener().
• attachEvent().
• document.createElement().
• insertBefore().

Answer 4

try use the JQuery .append() function

$("a").click(function(e){
 $("form").append("<input />");
})