Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Textfields Dynamically
kvarnerexpress
post Jun 17 2005, 08:00 PM
Post #1


Super Member
*********

Group: Members
Posts: 407
Joined: 13-December 04
Member No.: 2,696
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

(list)

Go to the top of the page
 
+Quote Post
slu
post Jun 23 2005, 01:15 PM
Post #2


Newbie [Level 2]
**

Group: Members
Posts: 27
Joined: 22-June 05
Member No.: 8,557
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.

CODE

<!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>


(list)

Go to the top of the page
 
+Quote Post
DoR
post Jun 23 2005, 03:20 PM
Post #3


Member [Level 1]
****

Group: Members
Posts: 59
Joined: 8-June 05
Member No.: 7,996
Dear varnerexpress.
Here is some code to do what you want. It is based on JavaScript.
CODE

<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.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 11th October 2008 - 05:42 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation