[SOLVED] innerHTML of form

[atomicrabbit]

Hey, I'm trying to dynamically create fieldsets, but I don't think the innerHTML function doesn't work with forms, only divs

 

This is what I was basically trying:

 

function additem() {
// create new item
var tempHTML = document.getElementById("addProdForm").innerHTML;
document.getElementById("addProdForm").innerHTML = document.getElementById("addForm").innerHTML + tempHTML;

}

<div id="addForm">

    <form method="POST" action="" id="addProdForm">
        <fieldset>
            ---form stuff stuff----
        </fieldset>
        <input type="submit" value="Add" name="submit" >
        <br /><a href="javascript:additem();">Add Another</a>
    </form>
</div>

 

So what I was hoping to do is get it to create a new identical fieldset, but it doesn't work, for obvious reasons...

 

Is there another way I can do this? Does innerHTML only work for DIVs?

[atomicrabbit]

ok... i was playing around with some options and figured this out... i figured if I add a new div around the fieldset, I can get the innerHTML of that div... This is what I came up with. I know it's not a solid script, but I don't know a lot of javascript -- enough to get me by. I am posting here in hopes that someone can give me some ideas.

 

<script>
var addProdCount=2;
var tempHTML;


function additem() {
if (addProdCount > 5) {
	alert('You can only add 5 products at a time');
	return;
}

// get original div content only if it's the first time
if (addProdCount == 2) tempHTML = document.getElementById("field_div").innerHTML;

// define field names in array to be incremented
var fieldnames=new Array("Fieldset Title ","fieldone","fieldtwo","fieldthree","fieldfour","fieldfive");

// increment field names using the array defined above
for ( var i in fieldnames ) {
	tempHTML = tempHTML.replace(fieldnames[i] + (addProdCount-1), fieldnames[i] + addProdCount);
}

// dynamically create new div
document.getElementById("field_div").innerHTML = document.getElementById("field_div").innerHTML + tempHTML;

addProdCount++;
}
</script>

<div id="addForm">

    <form method="POST" action="" id="addForm">
    	<div id="field_div">
        <fieldset>
            <legend>Fieldset Title 1</legend>

            <input id="fieldone1" name="fieldone1" type="text" ><br />
            <input id="fieldtwo1" name="fieldtwo1" type="text"><br />
            <input id="fieldthree1" name="fieldthree1" type="text"><br />
            <input id="fieldfour1" name="fieldfour1" type="text"><br />
            <input id="fieldfive1" name="fieldfive1" type="text"><br />

        </fieldset>
        </div>

        <input type="submit" value="Add" name="submit" >
        <br /><a href="javascript:additem();">Add Another</a>
    </form>
</div>

 

I guess it will do for now, but if anyone has a better way of doing it, please share... The problem with this code is if you have information entered into the fields and then click the "add another" link, it clears out all the info. I also want the ability to remove fieldsets, but this won't work well the way I coded it.

 

I guess I would have to create two embedded div tags

 

<div id="addForm">

    <form method="POST" action="" id="addForm">
        <div id="field_div">
        <div id="item1div">
        <fieldset>
            <legend>Fieldset Title 1</legend>

            <input id="fieldone1" name="fieldone1" type="text" ><br />
            <input id="fieldtwo1" name="fieldtwo1" type="text"><br />
            <input id="fieldthree1" name="fieldthree1" type="text"><br />
            <input id="fieldfour1" name="fieldfour1" type="text"><br />
            <input id="fieldfive1" name="fieldfive1" type="text"><br />

        </fieldset>
        </div>
        </div>

        <input type="submit" value="Add" name="submit" >
        <br /><a href="javascript:additem();">Add Another</a>
    </form>
</div>

 

then grab the itemXdiv innerHTML and insert it at the bottom of the "field_div" div. Then if I want to remove it, I can either set the display of the div to none or use the removeNode function.

 

Again, I'm looking for better solutions because my solution seems kinda make-shift.

[lemmin]

Try using cloneNode() to copy the object:

<html>
<head>
<script type="text/javascript">
function addItem(obj) {
obj.form.insertBefore(obj.form.firstChild.cloneNode(true), obj);

}
</script>
</head>

<body>


<div id="addForm">
    <form method="POST" action="" id="addProdForm">
        <fieldset>
            ---form stuff stuff----
        </fieldset>
<button onclick="addItem(this);">Add Another</button>
    </form>
</div>
</body>
</html>

 

[atomicrabbit]

Thanks lemmin. I ended up doing something similar to what you suggested...

 

Since I got no help here for 3 days, I was searching the net and tweaking my code. I was having trouble with keeping the values of the fieldsets that were already displayed after adding another fieldset, so I did a bit more searching and found this page:

http://www.codingforums.com/archive/index.php?t-65390.html

 

Basically by using the .appendChild function I was able to do everything I wanted quite easily.

 

var addProdCount = 2;

function addFile(){
if (addProdCount > 5) {
	alert('You can only add 5 products at a time.');
	return
}

// get root mytab
var root = document.getElementById('addProdForm').getElementsByTagName('fieldset')[0].parentNode.parentNode;
var tmpForm = document.getElementById('addProdForm').getElementsByTagName('fieldset')[0].parentNode.innerHTML;
var oR = cE('div');

rLink = "<span style=\"cursor:pointer;\" onClick=\"this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);addProdCount--;\">[Remove]</span>";

rTitle = "New Product " + rLink;

oR.innerHTML = tmpForm;
oR.innerHTML = oR.innerHTML.replace(eval("/New Product/gi"), rTitle);

root.appendChild(oR);
addProdCount++;

}

function cE(el){
this.obj =document.createElement(el);
return this.obj
}