adding input field dynamically causes problems

Question

I'm working on a html page and I have a problem when adding a new input field to the form. The problem is that, the content of the other input fields is resetted when the new field is added.

The code for adding a new input text is the following:

var TSLOT = 
[   "<div id=\"TSLOT_n_\">",
    "From: <input type=\"text\" id=\"from_n_\" autocomplete=\"off\">",
    "By letter: <input type=\"text\" id=\"letter_n_\" autocomplete=\"off\">",
    "To: <input type=\"text\" id=\"to0-_n_\" autocomplete=\"off\">",
    "<input type=\"text\" id=\"to1-_n_\" autocomplete=\"off\">",
    "<BR></div>" ].join("");

function addSlotTransition() { 
document.getElementById( "Delta" ).innerHTML += TSLOT.replace( /_n_/g, Delta_size++ ); }

Am I missing something?

Are the other input fields also in document.getElementById("Delta")? If so, this would explain the problem: you're replacing all the input fields so their content is reset. — soktinpk
– soktinpk, Commented Jul 20, 2014 at 12:24

blex · Accepted Answer · 2014-07-20 12:36:07Z

2

When you use .innerHTML, it creates a new DOM tree from the parsed innerHTML and rewrites it, so everything not present in the HTML is lost. Use a real append:

 document.getElementById( "Delta" ).insertAdjacentHTML( 'beforeend', TSLOT.replace( /_n_/g, Delta_size++ ) );

JS Fiddle Demo

edited Jul 20, 2014 at 12:36

answered Jul 20, 2014 at 12:29

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

optimusfrenk Over a year ago

Now I understand the issue. Ooooh yeah now it works!!

Collectives™ on Stack Overflow

adding input field dynamically causes problems

1 Answer 1

JS Fiddle Demo

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related