Shoutbox

using js to add a form input, but retaining typed info? - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: using js to add a form input, but retaining typed info? (/showthread.php?tid=91564)
using js to add a form input, but retaining typed info? by stoshrocket on 07-19-2009 at 10:27 PM

I've quickly knocked up the following:

HTML code:
<script type="text/javascript">
function add_input(){
document.getElementById('input_container').innerHTML += '<input type="text"><br />';
}
</script>
 
<div>
<form>
<div id="input_container">
<input type="text"><br />
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
...which just adds a form input when you click the add input link. However, I want to be able to retain the information pre-entered in the inputs, so if I typed something into the first input, click add another, and I would have whatever I typed in the first plus another input (currently it just replaces the div contents with a new set of inputs). Any ideas?
RE: using js to add a form input, but retaining typed info? by felipEx on 07-19-2009 at 11:14 PM

Use createElement and appendChild

Javascript code:
function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
};
 
function create(type, opt, parent){
    var el = document.createElement(type);
 
    if (opt.style){
        extend(opt.style,el.style);
    }
 
    delete opt.style;
 
    extend(opt,el);
 
    if (parent){
        parent.appendChild(el);
    }
 
    return el;
}
 
 
function add_input(){
create("input", {type: "text"}, document.getElementById('input_container'));
create("br", {},  document.getElementById('input_container'));
//document.getElementById('input_container').innerHTML += '<input type="text"><br />';
}

this should do the trick :)
RE: using js to add a form input, but retaining typed info? by stoshrocket on 07-20-2009 at 03:13 PM

Perfect (Y) thanks very much