value of textfield disappears when I add a new one with javascript

Question

I use javascript to dynamically add textfields to a div

function moreLink(){
//gco is global, starts from 1, limit of textfields added is 10

if (gco!=10){
    var newLinkb=[];

        document.getElementById("extraLink").innerHTML+="<br>";
    newLinkb[gco]= document.createElement('input');
    newLinkb[gco].setAttribute('type','text');
    newLinkb[gco].setAttribute('id',gco);        
    document.getElementById("extraLink").appendChild(newLinkb[gco]);            

    gco++;

        }

else{ alert ('sorry, cannot add more, limit is 10');
      }

}

So, when I hit the right button, calls the moreLink function wich adds a new textfield input type.

The problem is ,if I write something in the first textfield and hit the button, a second textfield appears, but the text in the first one (the value), dissappears.

How do I fix this?

Thanks

Just for you to know. You can't set an id that starts with number. `setAttribute('id',gco);` — Dvir, Oct 15 '13 at 21:35
@Dvir, [you can](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/18453687#18453687) in HTML5 — Sergio, Oct 15 '13 at 21:36
Maybe you want the `newLinkb` array to be global as well, instead of creating a new (empty) one each time? Then also use `newLinkb.length` instead of `gco` — Bergi, Oct 15 '13 at 21:37
@Sergio Interesting. anyway the link you post isn't approve that. But i check it on chrome and you right. it's ok. — Dvir, Oct 15 '13 at 21:40
@Dvir—browsers where never so fussy anyway, they are very tolerant of invalid HTML, attributes and values. But of course it's always best to stick to valid markup. :-) — RobG, Oct 15 '13 at 23:29

Bergi · Accepted Answer · 2013-10-15T23:53:33.087

3

document.getElementById("extraLink").innerHTML+="<br>";

This does stringify (serialize) the DOM of #extraLink, append a string to it, and then parse it again. All values in the DOM (inputs, custom properties, event handlers) will be lost. Instead, use proper DOM methods, avoid innerHTML!

document.getElementById("extraLink").appendChild(document.createElement("br"));

edited Oct 15 '13 at 23:53

answered Oct 15 '13 at 21:39

Bergi

630,263
148
957
1,375

Strictly, all in–line attributes and their values (including listeners) *should be* preserved by innerHTML. A big difference is what happens with properties—some browsers reflect modified values in attributes, others don't. The W3C has struggled a bit with specifying how the [innerHTML property](http://domparsing.spec.whatwg.org/#innerhtml) works, probably because it is inherently quite complex and implementations that have been around for some time are quite different. – RobG Oct 15 '13 at 23:38
@RobG: Did I write "attributes"? I meant the (unreflected) DOM object properties. All changed HTML attributes will be preserved of course. – Bergi Oct 15 '13 at 23:58
Not attributes, but "event handlers", which may be in–line or dynamic and properties may or may not be reflected depending on the browser. ;-) Wholeheartedly agree with using innerHTML for trivial content only. – RobG Oct 16 '13 at 01:03

score 0 · Answer 2 · answered Oct 15 '13 at 21:37

0

If you are running appendChild on a DIV, or another element, it becomes part of it's innerHTML, however the value won't.

Try:

document.getElementById("extraLink").appendChild(document.createElement('br'));

answered Oct 15 '13 at 21:37

Mat Carlson

543
3
12

value of textfield disappears when I add a new one with javascript

2 Answers2