Javascript: Dynamic adding of text fields and select tag is not getting saved

Question

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

Question: When I click on add more first and type something and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?

Thanks In advance

Worked for me in mobile safari: http://jsfiddle.net/2yEHQ/ – Austin Mullins Feb 19 '13 at 10:13 — Austin Mullins, Feb 19 '13 at 10:13

sasi · Answer 1 · 2013-02-19T10:39:16.033

1

.innerHtml replaces the content which you place next..so use append like

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

 document.getElementById("theBlah").appendChild(t);

edited Feb 19 '13 at 10:39

answered Feb 19 '13 at 10:10

sasi

4,192
4
28
47

What is `t` in your case? The OP always seems to append to the existing content already. – Felix Kling Feb 19 '13 at 10:16
1

I would imagine t would be an HTMLElement object representing the text input. – Hendeca Feb 19 '13 at 10:19
So how should my JavaScript look finally? – Supersonic Feb 19 '13 at 10:42

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

Problem is that typing something in the input does not change its value parameter but sets its value property (know the difference), e.g. it changes this.value instead of this.attributes.value, which results in innerHTML not actually containing the typed value.

So since innerHTML += 'string' ist just like setting innerHTML = innerHTML + 'string', it resets the input value to its attribute, which is empty.

I'd really recommend to use jQuery here, because with pure JS you'd have to first create the input and select element, then apply all needed attributes with multiple .setAttribute() calls.

score 0 · Accepted Answer · answered Feb 21 '13 at 06:44

I used Jquery and solved it this way:

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

Javascript: Dynamic adding of text fields and select tag is not getting saved

3 Answers3