Textfields Dynamically

kvarnerexpress

Jun 17 2005, 08:00 PM

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

slu

Jun 23 2005, 01:15 PM

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>

DoR

Jun 23 2005, 03:20 PM

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.

Similar Topics

Keywords : textfields dynamically

How To Dynamically Modify The Select Object? - about add, remove... (0)
Dynamically Load And Play Movies? - (0)
I'm looking for a way to dynamically load and play movies. I have a folder where the movies will
be stored in the same fashion (movie1.avi, movie2.avi, movie3.avi). I'm looking for a way to
detect the end of movie event and start playing the next movie. This could be as simple as reloading
the page since the page is actually in coldfusion and everytime the page refreshes a counter is
incremented which then switches the filename for the embeded file to the next movie. Basically, I
just need something to refresh the page at the end of the movie being played. Than...

Looking for textfields, dynamically

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE