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

問題は、入力に何かを入力しても、その値パラメーターは変更されず、その値プロパティが設定されることです (違いを知っています) 。this.valuethis.attributes.value

そのため、innerHTML += 'string'ist は settinginnerHTML = innerHTML + 'string'と同じように、入力値を空の属性にリセットします。

ここでは jQuery を使用することを強くお勧めします。純粋な JS では、最初に入力要素と選択要素を作成してから、必要なすべての属性を複数の.setAttribute()呼び出しで適用する必要があるためです。

于 2013-02-19T10:28:07.730 に答える
1

.innerHtml は、次に配置するコンテンツを置き換えます。そのため、追加のように使用します

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

 document.getElementById("theBlah").appendChild(t);
于 2013-02-19T10:10:28.227 に答える
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 に答える