Shoutbox

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?

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

Perfect thanks very much