Javascript InnerHTML Erases Data In Form Elements
- by Jordan
I have this form with a button that allows you to add fields to the form.
<form id="contact" name="contactForm" action="newPoll.php" method="post">
<fieldset>
<legend>Create A Poll</legend><br style="clear:both;">
<ol>
<li><lable for=pollTitle>Poll Title:</lable><input name="pollTitle" id="pollTitle" type="text" size="66" /> </li>
<li><lable for=question>1st Question:</lable><input name="question" id="question" type="text" size="66" /> </li>
<li><lable for=answerType>Constrained:</lable><input name="answerType" id="answerType" value="Constrained" type="radio" size="66" /><span style="margin: 0 0 0 40px;">
Unconstrained: <input style="margin-right: 30px;" name="answerType" value="Unconstrained" id="question" type="radio" size="66" /></span>(Allow multiple answers) </li>
<li><lable for=answer1>Answer:</lable><input name="answer1" id="answer1" type="text" size="66" /> </li>
<li><lable for=answer2>Answer:</lable><input name="answer2" id="answer2" type="text" size="66" /> </li>
<li><lable for=answer3>Answer:</lable><input name="answer3" id="answer3" type="text" size="66" /> </li>
<li><lable for=answer4>Answer:</lable><input name="answer4" id="answer4" type="text" size="66" /> </li>
</ol><br />
</fieldset>
<input type="button" value="Add More Answers" name="addAnswer" onClick="generateRow()" /><input type="submit" name="submit" value="Add Another Question">
</form>
And here is generateRow():
var count = 5;
function generateRow() {
var d=document.getElementById("contact");
var b = document.getElementById("answer4");
var c =b.name.charAt(0);
var f = b.name.substr(0, 6);
var y = f + count;
count = count + 1;
d.innerHTML+='<li><lable for=' + y + '>Answer:</lable><input name="' + y + '" id="' + y + '" type="text" size="66"/> </li>';
}
The issue is whenever a new row is added, it erases any input that may have been typed in any of the un-original (added) text fields. It should leave the data in form elements
