Javascript InnerHTML删除表单元素中的数据 [英] Javascript InnerHTML Erases Data In Form Elements

问题描述

我有一个按钮的这种形式，允许您添加字段到表单。

 < form id =contactname =contactFormaction =newPoll.phpmethod =post> ; 
< fieldset> 
< legend>创建投票< / legend>< br style =clear：both;> 
 
 
 
< li>< lable for = pollTitle> Poll标题：< / lable>< input name =pollTitleid =pollTitletype =textsize =66/> < /锂> 
< li>< lable for = question> 1st问题：< / lable>< input name =questionid =questiontype =textsize =66/> < /锂> 
< lable for = answerType>约束：< / lable>< input name =answerTypeid =answerTypevalue =Constrainedtype =radiosize =66 />< span style =margin：0 0 0 40px;> 
 Unconstrained：< input style =margin-right：30px; name =answerTypevalue =Unconstrainedid =questiontype =radiosize =66/>< / span>（允许多个答案）< / li> 
< li>< lable for = answer1>回答：< / lable>< input name =answer1id =answer1type =textsize =66/> < /锂> 
< li>< lable for = answer2>回答：< / lable>< input name =answer2id =answer2type =textsize =66/> < /锂> 
< li>< lable for = answer3>回答：< / lable>< input name =answer3id =answer3type =textsize =66/> < /锂> 
< li>< lable for = answer4>回答：< / lable>< input name =answer4id =answer4type =textsize =66/> < /锂> 
 
< / ol>< br /> 
< / fieldset> 
< input type =buttonvalue =Add More Answersname =addAnsweronClick =generateRow（）/>< input type =submitname =submitvalue =添加另一个问题> 
< / form> 
  

这里是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 +'>回答：< / lable>< input name ='+ y +'id ='+ y +'type =textsize =66/> < /立GT;; 
} 
  

问题是每当添加新行时，已被输入到任何非原创（添加）的文本字段中。它应该将数据保留在表单元素中

解决方案

当您设置 innerHTML 属性，浏览器解析HTML并为其创建一个新的DOM树，然后用新的树替换当前的DOM树。这破坏了不在HTML中的任何数据。

您需要使用 createElement 和 appendChild 或使用 jQuery （更简单）。

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

解决方案

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

这篇关于Javascript InnerHTML删除表单元素中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！