Maintaing Input Values in Dynamically Generated Fields

Question

I have the following JavaScript which generates text-inputs dynamically and inserts them into a div. This code works fine, but if I type text into the field, then click the button to add another field I lose the text I typed in the first field.

I made a jFiddle - but for some reason it's not working. The same code works fine in my browser though.

Here's the function in question:

var optCount = 0;
function addOption(type){
    var cont = document.getElementById('new'+type+'Opts');
    cont.innerHTML = cont.innerHTML + "<span style='display:block;' id='opt" + optCount + "'><input type='text' style='width:80%;' /><a href='#' style='color:red; text-decoration:none; font-size:.6em;' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br /></span>";
    optCount++;
    return false;
}

How can I maintain the values of the existing fields when adding additional fields?

It's not finding addOption, since that's only added at document ready, and is being referenced when the dom loads. Just change the jsfiddle option in the top left corner to "No wrap - in <head>", and your code will execute. jsfiddle.net/PBp4g/4 (Note, this doesn't fix your problem, it just fixes your fiddle) — Scott Mermelstein
– Scott Mermelstein, Commented May 7, 2013 at 14:40

Explosion Pills · Accepted Answer · 2013-05-07 14:40:15Z

2

Don't replace the entire contents of the div every time. Instead, just create the new option and append it.

var cont = document.getElementById("new"+type+"Opts");
var span = document.createElement('span');
span.className = 'block';
span.id = "opt" + optCount;
span.innerHTML = "<input type='text' class='width80' /><a href='#' class='dellink' onclick=\"return delOpt('opt" + optCount + "');\">[x]</a><br />";
optCount++;
cont.appendChild(span);

http://jsfiddle.net/ExplosionPIlls/PBp4g/5/

answered May 7, 2013 at 14:40

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

Collectives™ on Stack Overflow

Maintaing Input Values in Dynamically Generated Fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related