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.

Suave Nti · Accepted Answer · 2012-07-13 16:35:28Z

6

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

....

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

answered Jul 13, 2012 at 16:35

Suave Nti

3,76713 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suave Nti Over a year ago

@harley : Welcome .. That Tick and Upvote just made me cross 1K.. Enjoying SO :)

hardba11 Over a year ago

@harley - I just discovered today that $("body").append(someContent) does not work in IE7 while $(someContent).appendTo("body") does work. Quirky I know, but it reminded about this question and thought I'd come back and update it.

Jerry · Accepted Answer · 2012-07-13 16:36:22Z

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" />');

    }
});

answered Jul 13, 2012 at 16:36

Jerry

1,7854 gold badges22 silver badges41 bronze badges

3 Comments

harley_woop Over a year ago

Sorry, another question- how could I make them into a list so they all sit on the left?

FlyingMolga Over a year ago

@harley: You could use display: block for the inputs. Then each would have its own line.

Angelo Tricarico Over a year ago

Pay attention when copying code, I've gone crazy because of a invisible character at the end of the block.

David Thomas · Accepted Answer · 2012-07-13 17:14:45Z

2

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:

answered Jul 13, 2012 at 17:14

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

David Thomas Over a year ago

You're perfectly welcome; hopefully it'll be of some use to you, or others. =)

harley_woop Over a year ago

I think I'm going to use the jquery append. I'll use your solution I I ever have to do this again with using the library!

lusketeer · Accepted Answer · 2012-07-13 16:33:57Z

1

try use the JQuery .append() function

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

answered Jul 13, 2012 at 16:33

lusketeer

1,9301 gold badge12 silver badges29 bronze badges

Comments

hardba11 · Accepted Answer · 2012-07-13 16:39:36Z

1

Yep, jquery is the way to go here.

$("<input type='text'>").appendTo("#someContainer");

Good luck.

answered Jul 13, 2012 at 16:39

hardba11

1,51615 silver badges28 bronze badges

Comments

Andrea · Accepted Answer · 2013-07-01 10:21:19Z

0

The following example add input box at click a link:

<div id="start">
    <input/><br/><br/>
</div> 
<a href="#" id="box">Add more fields</a>

$("#box").click(function(){
    var add="";
    add+='<input/>'+'<br/>'+'</br/>';
    $("#start").append(add);
});

edited Jul 1, 2013 at 10:21

Andrea

12.5k17 gold badges71 silver badges76 bronze badges

answered Jun 25, 2013 at 6:05

user2496033

Comments

Tareq Marji · Accepted Answer · 2016-02-24 17:04:43Z

0

<script type='text/javascript'>
    var counter = 1;
    var limit = 3;
    function addInput(divName) {

        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br><input type='text' name='myInputs" + counter + "'> <input type='text' name='myInputs" + counter + "'> <select><option value='88888'>888888888</option></select>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
</script>

<form method="POST">
    <div id="dynamicInput">

        <input type="button" value="Add another text input" onclick="addInput('dynamicInput');">
</form>

answered Feb 24, 2016 at 17:04

Tareq Marji

14 bronze badges

1 Comment

Manos Nikolaidis Over a year ago

Adding some explanation in English would be great

Collectives™ on Stack Overflow

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

7 Answers 7

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related