ok, i have a lil form and i am adding elements to it with innerHTML if they are needed. This works fine, however, when i add a couple text fields with innerHTML, it empties the form.
Is there any way around this? or do i seriously have to fill an array and write it again, each time an element is generated?
Link:
http://www.unikron.com/dev/MexiCan/
Crazy JS:
<script type="text/javascript">
//INIT
var children = 0;
//FUNCTIONS
function MM_effectSlide(targetElement, duration, from, to, toggle, finishFunc)
{
Spry.Effect.DoBlind(targetElement, {
duration: duration,
from: from,
to: to,
toggle: toggle,
finish: finishFunc
});
}
expandSpouse = function(out) {
x = document.getElementById('spouseinfo')
if (out) {
MM_effectSlide(x, 1000, '0px', '300px', false);
} else {
MM_effectSlide(x, 1000, '300px', '0px', false);
}
}
addChild = function(thebutton) {
thebutton.parentNode.removeChild(thebutton);
var Node = document.getElementById("childAdderTitle");
Node.parentNode.removeChild(Node);
var Node2 = document.getElementById("childRemover");
if (Node2) {
Node2.parentNode.removeChild(Node2);
}
document.getElementById("childHolder").innerHTML += "<div id='child" + children + "' id='child" + children + "' style='border:1px; border-color:#FFFFFF; border-style:solid; height:0px; overflow:hidden; color:#FFFFFF; font:Arial, Helvetica, sans-serif; font-size:14px; width:700px;'><h2 style='padding-left:20px;'>Hiljos/Child " + (children + 1) + "</h2><table width='100%' border='0'><tr><td class='rightalign'>Nombre/First Name:</td><td><input id='name_child" + children + "' type='text'/></td></tr><tr><td class='rightalign'>Apellido / Last Name:</td><td><input id='lastname_child" + children + "' type='text' /></td></tr><tr><td class='rightalign'>E-mail:</td><td><input id='email_child" + children + "' type='text'/></td></tr><tr><td class='rightalign'>Fechade Nacimiento/Date of Birth:</td><td><select id='day_child" + children + "'><option value='1'>1st</option><option value='2'>2nd</option><option value='3'>3rd</option><option value='4'>4th</option><option value='5'>5th</option><option value='6'>6th</option><option value='7'>7th</option><option value='8'>8th</option><option value='9'>9th</option><option value='10'>10th</option><option value='11'>11th</option><option value='12'>12th</option><option value='13'>13th</option><option value='14'>14th</option><option value='15'>15th</option><option value='16'>16th</option><option value='17'>17th</option><option value='18'>18th</option><option value='19'>19th</option><option value='20'>20th</option><option value='21'>21st</option><option value='22'>22nd</option><option value='23'>23rd</option><option value='24'>24th</option><option value='25'>25th</option><option value='26'>26th</option><option value='27'>27th</option><option value='28'>28th</option><option value='29'>29th</option><option value='30'>30th</option><option value='31'>31st</option></select><select id='month_child" + children + "'><option value='1'>January</option><option value='2'>February</option><option value='3'>March</option><option value='4'>April</option><option value='5'>May</option><option value='6'>June</option><option value='7'>Jul</option><option value='8'>August</option><option value='9'>September</option><option value='10'>October</option><option value='11'>November</option><option value='12'>December</option></select><select id='year_child" + children + "' id='year_child" + children + "'></select></td></tr><tr><td class='rightalign'>Direccion/Address:</td><td><textarea id='address_child" + children + "' cols='30' rows='2'></textarea></td></tr><tr><td class='rightalign'>Telefono/Phone:</td><td><input id='phone_child" + children + "' type='text'/></td></tr><tr><td class='rightalign'>Cell Phone:</td><td><input id='cell_child" + children + "' type='text'/></td></tr><tr><td class='rightalign'>Ocupacion/Occupation:</td><td><input id='occupation_child" + children + "' type='text'/></td></tr><tr><td class='rightalign' id='buttonTitleHolder"+children+"'><div id='childAdderTitle'>Children:</div></td><td id='buttonHolder"+children+"'><div id='childAdder' style='cursor:hand; cursor:pointer; text-decoration:underline;' onclick='addChild(this)'>Add another child</div> <div id='childRemover' style='cursor:hand; cursor:pointer; text-decoration:underline;' onclick=\"removeAChild();\">Remove this child</div></td></tr></table></div>";
n = 2007;
years = "";
for (k = 0; k < 100; k++) {
years += "<option value='" + n + "'>" + n + "</option>";
n--;
}
document.getElementById("year_child" + children).innerHTML = years;
MM_effectSlide(document.getElementById("child" + children), 1000, '0px', '350px', false);
children++;
}
function removeAChild() {
children--;
addButtons();
MM_effectSlide(document.getElementById("child" + children), 1000, '350px', '0px', false, removetheitem);
}
function removetheitem() {
document.getElementById('child' + children).parentNode.removeChild(document.getElementById('child' + children));
}
addButtons = function() {
if (children == 0){
document.getElementById("buttonTitleHolderRoot").innerHTML = "<div id='childAdderTitle'>Children:</div>";
document.getElementById("buttonHolderRoot").innerHTML = "<div id='childAdder' style='cursor:hand; cursor:pointer; text-decoration:underline;' onclick=\"addChild(this)\">Add a child</div>";
} else {
document.getElementById("buttonTitleHolder"+(children-1)).innerHTML = "<div id='childAdderTitle'>Children:</div>"
document.getElementById("buttonHolder"+(children-1)).innerHTML = "<div id='childAdder' style='cursor:hand; cursor:pointer; text-decoration:underline;' onclick='addChild(this)'>Add another child</div> <div id='childRemover' style='cursor:hand; cursor:pointer; text-decoration:underline;' onclick='removeAChild()'>Remove this child</div>";
}
}
</script>