G
Greg Scharlemann
I'm not sure the best way to accomplish this... my hunch is with
javascript, but I'm not sure if using server side code (PHP) would be
easier.
I'm adding people to a database. People have a first name, last name,
and a undetermined number of Cities and States with which they can be
associated. I've got a drop down box that I would like to use to
display the number of inputs to allow for city/state entry. I would
like to dynamically increase or decrease the inputs based on a user
changing the selection in the drop down box, without submitting the
script. Only the first city and state are required (which is why the
label is bold). Any ideas on the best way to handle this without
losing any potential city information that may have been previously
typed into the input (i.e. if I type San Fran into city0 and CA into
state0 and then change the number of cities to 4 - I'd like San Fran
and CA to still be populated in city0 and state0).
Here's my test page (I hard coded 2 city and state lines to better
demonstrate what I'm trying to achieve, default would be only one city
and state line):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="add.php" name="add" id="add">
<b>First Name:</b>
<input type="text" name="firstName" value="" size="30"
maxlength="40" />
<br/>
<b>Last Name:</b>
<input type="text" name="lastName" value="" size="30"
maxlength="40" />
<br/>
<b>City:</b>
<input type="text" name="city0" size="20" value=""
maxlength="100" />
<b>State:</b>
<select name="state0" size="1">
<option value=""></option>
<option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>
<option value="CT" >CT</option>
</select><br/>
City:
<input type="text" name="city0" size="20" value=""
maxlength="100" />
State:
<select name="state0" size="1">
<option value=""></option>
<option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>
<option value="CT" >CT</option>
</select><br/>
Number of Cities:
<select name="showCity"
onchange="javascript:document.forms['add'].submit();">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/>
<input type="submit" name="submit" value="Add" class="search" />
</form>
</body>
</html>
javascript, but I'm not sure if using server side code (PHP) would be
easier.
I'm adding people to a database. People have a first name, last name,
and a undetermined number of Cities and States with which they can be
associated. I've got a drop down box that I would like to use to
display the number of inputs to allow for city/state entry. I would
like to dynamically increase or decrease the inputs based on a user
changing the selection in the drop down box, without submitting the
script. Only the first city and state are required (which is why the
label is bold). Any ideas on the best way to handle this without
losing any potential city information that may have been previously
typed into the input (i.e. if I type San Fran into city0 and CA into
state0 and then change the number of cities to 4 - I'd like San Fran
and CA to still be populated in city0 and state0).
Here's my test page (I hard coded 2 city and state lines to better
demonstrate what I'm trying to achieve, default would be only one city
and state line):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="add.php" name="add" id="add">
<b>First Name:</b>
<input type="text" name="firstName" value="" size="30"
maxlength="40" />
<br/>
<b>Last Name:</b>
<input type="text" name="lastName" value="" size="30"
maxlength="40" />
<br/>
<b>City:</b>
<input type="text" name="city0" size="20" value=""
maxlength="100" />
<b>State:</b>
<select name="state0" size="1">
<option value=""></option>
<option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>
<option value="CT" >CT</option>
</select><br/>
City:
<input type="text" name="city0" size="20" value=""
maxlength="100" />
State:
<select name="state0" size="1">
<option value=""></option>
<option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>
<option value="CT" >CT</option>
</select><br/>
Number of Cities:
<select name="showCity"
onchange="javascript:document.forms['add'].submit();">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/>
<input type="submit" name="submit" value="Add" class="search" />
</form>
</body>
</html>