Add textbox when button is pressed

I know this can be accomplished in Javascript (I hope!) I have a c开发者_开发百科ouple of forms on my page, but I cannot guess how many the user will need, so is there some magic which can be done in javascript which when a button is pressed this:

 <input name="userfile[]" type="file" /><br />
    <input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />

Is added to a designated area? Keeping in mind adding a number onto the name if the button is pressed eg name="imagedescription3" next name="imagedescription4" and so forth This may be posted around the internet, I know it would be, I just don't know how to thorougly phrase my question

---

If possible, I recommend adding jQuery to your project. It makes DOM manipulation easy.

http://api.jquery.com/category/manipulation/

An example might look like this

<a href="#" id="myButton">Add Item</a>    
<div id="#wrapper">
        <input type="text" value="Description goes here." name="imagedescription1" maxlength="20" onfocus="this.value = '';" /><br />
        <input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
</div>    
        <script>
        $(function(){
            var i = 3; // i would be incremented with each add.
            $("#myButton").click(function(){
                $('<input type="text" value="Description goes here." name="imagedescription' + i + '" maxlength="20" onfocus="this.value = '';" /><br />').appendTo('#wrapper');
            });
            return false;
        });    

</script>

---

You can write a JS function for adding textboxes and call the function when the button is pressed.

The function should go along these lines....

var count;
function functionName()
{
   count++;
   document.Write('<input type="text"  value="..." name="imagedescriptor'+count+'" max..');
}

Hopefully it works.

---

Try this:

var i = 2;
var sourceTextNode = document.getElementsByName("imagedescription2")[0];
function createTextBox(){
    var newNode = sourceTextNode.cloneNode(false);
    newNode.setAttribute("name", ++i);
    var parent = sourceTextNode.parentNode;
    if(parent.lastchild == sourceTextNode) {
        parent.appendChild(newNode);
    } else {
        parent.insertBefore(newNode, sourceTextNode.nextSibling);
    }
}

function btnClicked(){
    createTextBox();
}

---

another jQuery solution:

Live Demo

$("#f_add").click(function(e) {
    var field = document.createElement('input');
    $(field).attr('type', 'text');
    $(field).attr('name', 'field[]');
    $("#thenewhotness").append(field);
    e.preventDefault();
});

<form id="thenewhotness">
    <button id="f_add">Add Extra Field</button>
    <input type="text" name="field[]">
</form>