The following example should give you an idea of how to do this. It works by using the function injectHtml() to inject the html that generates the form into a given section (a div called namesForm). The function adds input fields corresponding to the array called names. The array is initialized to having one blank entry. When the user clicks then Add button the function addField() is called. This function copies the values from the form (back) into the array, and adds a blank entry at the end of the array. When form is submitted the function displayValues() is called - it simply displays the list of names, and should be replaced by a validation function.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Names</title> <script type="text/javascript"> var names = new Array(1); names[0] = ""; function injectForm() { var html = '<form id="namesList" action="">'; for (var i=0; i<names.length; i++) { html += '<input type="text" id="names" value="' + names[i] + '"><br>'; } html += '<input type="button" value="Add" onClick="addField()">'; html += '<input type="submit" value="Submit" onClick="displayValues()">'; html += '</form>'; document.getElementById("namesForm").innerHTML = html; if (names.length > 1) { document.getElementById("namesList").names[names.length-1].focus(); } else { document.getElementById("namesList").names.focus(); } } function addField() { var form = document.getElementById("namesList"); for (var i=0; i<names.length; i++) { names[i] = (names.length > 1) ? form.names[i].value : form.names.value } names[names.length] = ""; injectForm() } function displayValues() { var form = document.getElementById("namesList"); var msg = "Names:"; for (var i=0; i<form.names.length; i++) { msg += "\n" + form.names[i].value; } alert(msg); } </script> </head> <body> <div id="namesForm"> <script type="text/javascript">injectForm();</script> </div> </body></html>
