Expanding HTML forms using Javascript

I have a simple HTML form that asks a user to input their name, SKU, quantity, and comments. This is for a simple inventory request system.

<html>
<body>
<form id="myForm" method="post"> 
        <input type="submit">
        <br>Name: <input type="text" name="form[name]"> 
        <br>SKU: <input type="text" name="form[SKU1]"> 
        <br>Quantity: <input type="text" name="form[quantity1]">
     <br>Comment: <input type="text" name="form[comment1]"> 
</form> 
<a href="javascript:addOption();">Add item</a> 

<script> 
        var num = 2; //The first option to be added is number 2
        function addOption() { 
                var theForm = document.getElementById("myForm"); 
                var newOption = document.createElement("input"); 
                newOption.name = "form[SKU"+num+"]"; // form[varX]
                newOption.type = "text";
                theForm.appendChild(newOption); //How can I add a newline here?
                optionNumber++;
        } 
</script>
</body>
</html>

Currently I can only get it working where it will add a single form value. I would like to recreate the entire myForm except for the name field with a single click.

ansaurus

tags:

views:

answers:

Expanding HTML forms using Javascript

related questions