Javascript InnerHTML Erases Data In Form Elements

Question

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

Related: http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes/1388965#1388965 — gnarf, Mar 09 '10 at 19:27

score 1 · Answer 1 · answered Mar 09 '10 at 19:22

When you set the innerHTML property, the browser parses the HTML and creates a new DOM tree for it, then replaces the current DOM tree with the new one. This destroys any data that isn't in the HTML.

You need to append DOM elements using createElement and appendChild or using jQuery (easier).

William Brendel · Answer 2 · 2010-03-09T19:33:11.000

1

Give the <ol> element an ID:

<ol id="answers">
    ...
</ol>

Then change the first line in your function to:

var d=document.getElementById("answers");

Once you make the changes mentioned above, it should work. I have tested it in Firefox, Chrome, Safari, and IE8. And as others have mentioned, you should also correct your spelling of "label".

edited Mar 09 '10 at 19:33

answered Mar 09 '10 at 19:27

William Brendel

31,712
14
72
77

Indeed this does work. Thank you very much. I've also fixed my spelling =P – Jordan Mar 09 '10 at 19:49
@Jordan I'm glad you found my answer helpful. You can accept an answer by clicking the "check" symbol under the answer's score. I think you even earn a badge for it. Welcome to SO! – William Brendel Mar 14 '10 at 08:20

score 1 · Answer 3 · edited May 23 '17 at 10:26

The value attribute of the HTML element is not updated to reflect the current value of the input element... see this related question

You can avoid using the innerHTML property entirely by using createElement and appendChild.

Instead of:

d.innerHTML+='<li><lable for=' + y + '>Answer:</lable><input name="' + y + '" id="' + y    + '" type="text" size="66"/> </li>';

You can try:

var li = document.createElement('li');
li.for = y;
li.innerHTML = 'Answer:'

var input = document.createElement('input');
input.name=y;
input.id = y;
input.size=66;

d.appendChild(li);
d.appendChild(input);

score -1 · Answer 4 · answered Mar 09 '10 at 19:23

-1

For one thing, try spelling it "label" not "lable". For another, you are setting the "innerHTML" property of d, so of course you are wiping out any existing values.

answered Mar 09 '10 at 19:23

Robusto

31,447
8
56
77

Javascript InnerHTML Erases Data In Form Elements

4 Answers4

Linked

Related