1 
<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">

</div>
</body>
</html>

问题：当我首先单击添加更多并键入内容并再次单击添加更多时，我之前输入的内容被删除。这背后的原因是什么。以及如何解决？

提前致谢

4

3 回答 3

1

.innerHtml 替换您接下来放置的内容..所以使用 append like

 var t  = document.createElement("div"),

 document.getElementById("theBlah").appendChild(t);
于 2013-02-19T10:10:28.227 回答
1

问题是在输入中输入内容不会改变它的 value 参数，而是设置它的 value 属性（知道区别），例如它改变this.value而不是this.attributes.value，这导致 innerHTML 实际上不包含输入的值。

因此，由于innerHTML += 'string'ist 就像 setting 一样innerHTML = innerHTML + 'string'，它将输入值重置为其属性，该属性为空。

我真的建议在这里使用 jQuery，因为对于纯 JS，您必须首先创建输入和选择元素，然后通过多次.setAttribute()调用应用所有需要的属性。

于 2013-02-19T10:28:07.730 回答
0

我使用了 Jquery 并以这种方式解决了它：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
    var counter = 1;
    $("#addButton").click(function () {
    if(counter>6){
            alert("Not allowed");
            return false;
    }   
    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.html(Added my text box and select tag here);
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
     });
     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
    counter--;
        $("#TextBoxDiv" + counter).remove();
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">

    </div>
</div>
<input type='button' value='Add More' id='addButton'>
<input type='button' value='Remove' id='removeButton'>

</body>
</html>
于 2013-02-21T06:44:19.100 回答