Adding input fields in Javascript with onclick button

Question

Im always used to using jquery or other javascript frameworks but right now I have no frameworks to use so i wanted to see if anyone knows how i can do this in straight javascript if possible.

Basically i have a div like this

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
    <div class='label'>Room 1:</div>
    <div class="content">
        <span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>
        <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small</span>
    </div>
</div>

What i need one is when the add more button is clicked i need to basically add more width and length fields either creating a entire structure like the one above with all the divs or just inserting new span tag with the fields below the existing ones.

I know how to do it with jquery or prototype framework but unfortunatley I cannot use any frameworks for this. Does anyone have any idea how to do it. I would post code iv done for this but I dont even know where to beging.

Simply use the `innerHTML` property of the wrapping div, i.e. `document.getElementById('someIdYouAssignToTheDiv').innerHTML += '';` — Ingo Bürk, Apr 10 '13 at 18:00

score 16 · Accepted Answer · edited Jul 10 '16 at 18:15

16

You can use the innerHTML property to add content. Add a id="wrapper" to the div surrounding your span elements and then you can do

var dummy = '<span>Label: <input type="text"><small>(ft)</small></span>\r\n';
document.getElementById('wrapper').innerHTML += dummy;

Of course you don't need the id and can use other DOM methods to get to the div, but I find using ids easier and cleaner. Here's a quick fiddle

Also note that you shouldn't inline your css code, neither attach your javascript calls directly inside the DOM elements. Separating DOM, Javascript and CSS will make your life easier.

edited Jul 10 '16 at 18:15

anonameuser22

108
12

answered Apr 10 '13 at 18:10

Ingo Bürk

19,263
6
66
100

3

This works fine but i have one issue. When i click the button it adds the fields just fine but seems to clear the fields that are already filled in. What would be causing this. Iv never seen this happen – Yeak Apr 10 '13 at 18:41
2

You can use `createElement` and `appendChild` to avoid this. Fiddle: http://jsfiddle.net/2t9Dh/1/ – Ingo Bürk Apr 10 '13 at 18:44

Felix · Answer 2 · 2013-04-10T21:07:32.733

9

Don't need create new room?.

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';

    objTo.appendChild(divtest)
}

Demo: http://jsfiddle.net/nj4N4/7/

edited Apr 10 '13 at 21:07

answered Apr 10 '13 at 18:25

Felix

3,058
6
43
53

Your answer does not provide any actual code and just links to an external provider. Also, I fail to see how your answer adds anything substantial the the answers already given. – Ingo Bürk Apr 10 '13 at 18:30

Prakash Chennupati · Answer 3 · 2013-04-10T18:19:45.093

just use the innerHTML like this:

btw I changed div class="content" to id="content" you can add new id if you prefer.

function add_fields() {
   var d = document.getElementById("content");

   d.innerHTML += "<br /><span>Width: <input type='text'style='width:48px;'value='' /><small>(ft)</small></span> X <span>Length: <input type='text' style='width:48px'  value='' /><small>(ft)</small</span>";
}

DEMO: http://jsbin.com/oxokiq/5/edit

Adding input fields in Javascript with onclick button

3 Answers3

Linked