9

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.

Improve this question
1
  • Simply use the innerHTML property of the wrapping div, i.e. document.getElementById('someIdYouAssignToTheDiv').innerHTML += '<span><input ..../></span>'; Commented Apr 10, 2013 at 18:00

3 Answers 3

Reset to default
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.

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

2 Comments

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
You can use createElement and appendChild to avoid this. Fiddle: jsfiddle.net/2t9Dh/1
10

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/

Improve this answer

1 Comment

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.
3

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.