kvarnerexpress 0 Report post Posted June 17, 2005 Hi,I have a form with a couple of textfields - one for first name and one for last name. I'd like to give the ability to the user to add an unlimited amount of names but I don't want to display a million textfields, just one pair to start. How can I dynamically create fields upon the click of a button or link. They would have to be part of an array as well I guess. Can I have an array of textfields? How can this be done?Thanks Share this post Link to post Share on other sites
slu 0 Report post Posted June 23, 2005 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> Share this post Link to post Share on other sites
DoR 0 Report post Posted June 23, 2005 Dear varnerexpress. Here is some code to do what you want. It is based on JavaScript. <html><head><script language='JavaScript'>function add(){ var names=document.getElementById('names'); var text_field=document.createElement('input'); var node_after=document.getElementById('name1'); var node_inserted=names.insertBefore(text_field,node_after);}</script></head><body><form><div id='names'>First Name:<input type='text' name='name' id='name1'><input type='button' value='Add name' id='add_name' onClick="add();"><br></div>Surname:<input type='text' name'surname' id='surname1'><br></form></body></html> _________________________Vote me if usefull. Share this post Link to post Share on other sites
