Dynamically Add Elements with Javascript?

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>
&nbsp;<input type="text" name="firstName" value="" size="30"
maxlength="40" />
<br/>
<b>Last Name:</b>
&nbsp;<input type="text" name="lastName" value="" size="30"
maxlength="40" />
<br/>
<b>City:</b>
&nbsp;<input type="text" name="city0" size="20" value=""
maxlength="100" />
&nbsp;&nbsp;&nbsp;<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:
&nbsp;<input type="text" name="city0" size="20" value=""
maxlength="100" />
&nbsp;&nbsp;&nbsp;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:&nbsp;
<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>
 
A

aaron.reese

you basically have two choices.

You can put a hidden input in the form which contains details of how
far down the data entry you are and when the user has selected a state,
you submit the form (either to a new page or back to itself) and in the
PHP file you do a conditional check for the value of the hidden input
in $_POST (assuming you are using post).

You can then rebuild the form with the values the operator selected
originally and add the extra fields you need to complete the data.

OR.

You can build an Ajax script and on completion of the first dropdown
box, call a javascript function to call a url to a php page that
generates the drop down list and returns the details and use the
response handler to replace the innerHTML of the second drop down list.

The second version looks better because there is no page refresh,
however it relies on the operator having javascript enabled on their
browser and all the data entered will be lost if the user hits the back
button or refreshes the page unless you do some really complicated
stuff on the back end.

sample code for php:-

if (!($_POST('actionType'))) // action type doesnt exist
{
print "<FORM><input type = text name = someText/> <input type=hidden
name=actionType value=firstPart /><input type=submit value=submit
/></FORM>";
}
if ($_POST('actionType')== firstPart)// first part has been submitted
{
print "<FORM><input type = text name = someText
value=$_POST('actionType')/><input type=text name=someMoreText/> <input
type=hidden name=actionType value=secondPart /><input type=submit
value=submit /></FORM>";
}

Note that in the second form, the someText field takes the submitted
value from $_POST as its default.
 
A

ASM

Greg Scharlemann a écrit :
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>

<script type="text/javascript">
var idx = 0;
function addChoice() {
idx++;
if(idx==4) {
alert('no more choice possible to add');
return true;
}
var A = document.forms['add'].city0.cloneNode(true);
A.name = 'city'+idx;
A.value = '';
var P = document.createElement('p');
var B = document.createElement('b');
var T = document.createTextNode('City '+(+1+idx)+' : ');
B.appendChild(T);
P.appendChild(B);
P.appendChild(A);
A = document.forms['add'].state0.cloneNode(true);;
A.name = 'state'+idx;
A.selectedIndex = -1;
var B = document.createElement('b');
T = document.createTextNode('State '+(+1+idx)+' : ');
B.appendChild(T);
P.appendChild(B);
P.appendChild(A);
var target = document.add;
var position = document.forms['add'].submit.parentNode;
target.insertBefore(P, position);
document.forms['add']['city'+idx].focus();
document.forms['add']['city'+idx].select();
return false;
}
</script>
</head>

<body>
<form method="post" action="add.php" name="add" id="add"
onsubmit="return addChoice();">
<p><b>First Name:</b>
&nbsp;<input type="text" name="firstName" value="" size="30"
maxlength="40" />
<br/>
<b>Last Name:</b>
&nbsp;<input type="text" name="lastName" value="" size="30"
maxlength="40" />
</p>
<p><b>City:</b>
&nbsp;<input type="text" name="city0" size="20" value=""
maxlength="100" />
&nbsp;&nbsp;<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>
</p>
<p style="text-align:center;border-top:1px solid brown">
Add a choice of Citie :
<input type="submit" name="submit" value="Add" class="search" />
</p>
</form>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top