PDA

View Full Version : Added text boxes dynamically



chrscote
07-06-2007, 03:07 PM
I have a table in which users can enter up to 10 zip codes. Right now, I have 10 individual text boxes where they can enter the zips. However, as you can imagine, it looks a bit klunky. I'd like to be able to have a single text box with a text field somewhere nearby (either above or below probably) and have it so that when the user adds text in the box and click a button the text that was entered is placed in the field.
I just can't remember how to do this. Can someone please help me?


Thank you,
Chris Cote

jscheuer1
07-06-2007, 04:05 PM
Text boxes? Text fields? There aren't any such things. I think you mean textarea and text input, respectively. Do you?

Twey
07-06-2007, 04:06 PM
Something like this:
<script type="text/javascript">
var zipForm;
function isZIP(s) {
return /^\d{5}(-\d{4})?$/.test(s);
}
</script>
</head>
<body>
<form action="/cgi-bin/processor" method="post">
<div></div>
<script type="text/javascript">
zipForm = document.forms[document.forms.length - 1];
zipForm.zipDiv = (zipForm.zipDiv = document.getElementsByTagName("div"))[zipForm.zipDiv.length - 1];
</script>
<input type="text" name="nextZip">
<input type="button" onclick="
var f = this.form,
z = f.elements['nextZip'].value;
if(!isZIP(z))
return alert('Invalid ZIP code.');
var d = document.createElement('div'),
h = document.createElement('input');
h.type = 'hidden';
h.name = 'zip[]'; // [] for PHP and its poor support of the CGI standard.
d.appendChild(document.createTextNode(z));
d.appendChild(h).value = z;
f.zipDiv.appendChild(d);
">
</form>