CODEWITHSUNDEEP
javascripthtml
Jordan
Jordan

Reputation: 21

Javascript InnerHTML Erases Data In Form Elements

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

Upvotes: 2

Views: 2574

Answers (4)

gnarf
gnarf

Reputation: 106332

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);

Upvotes: 1

William Brendel
William Brendel

Reputation: 32189

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

Upvotes: 1

Robusto
Robusto

Reputation: 31883

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.

Upvotes: -1

SLaks
SLaks

Reputation: 887365

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

Upvotes: 1

Related Questions