473,395 Members | 1,629 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Dynamically Add Elements with Javascript?

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

Any thoughts/help/direction/advice is greatly appreciated! I've been
playing with this one all day!

Nov 13 '06 #1
3 7971
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.

Nov 13 '06 #2
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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles
Nov 13 '06 #3
I used javascript to solve a similar problem. I found this article
very helpful:

http://www.dustindiaz.com/add-and-re...th-javascript/

Greg Scharlemann wrote:
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).
Nov 13 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Terry | last post by:
I have a number of input boxes used to display totals based on selected items for each row in a table. There are more than a few rows that are identical, except for the form field name. I have...
1
by: Randell D. | last post by:
HELP! I am determined to stick with this... I'm getting there... for those who haven't read my earlier posts, I'm createing what should be a simple function that I can call to check that...
1
by: Will | last post by:
Hi, I have a problem trying to validate dynamically created html form elements using javascript. I have dynamically created a check box using ASP for each record in a recordset and have given each...
27
by: Nicholas Couch | last post by:
I have a little form with a couple of dynamically generated list boxes. When the user makes a selection from the first box, the second box is refreshed. When they make a selection from the second...
1
by: CS Wong | last post by:
Hi, I have a page form where form elements are created dynamically using Javascript instead of programatically at the code-behind level. I have problems accessing the dynamically-created...
4
by: Stone Chen | last post by:
Hello, I have form that uses javascript createElement to add additional input fields to it. However, my validating script will not process new input fields because it can only find the named...
11
by: GaryB | last post by:
Hi Guys, I've been battling with this one for hours - I hope that you can help me! My code modifies the <aon a page, from a standard document link into a link with a tailored onclick event. ...
5
by: phpCodeHead | last post by:
I am needing to determine how to go about validating that a field in my form contains only a positive integer. I know that this is fairly simple if the form contains only one element to be...
2
by: Ed Jay | last post by:
I'm dynamically creating several form input elements: mValue = integer constant; for(var j = 0; j < mValue; j++) { target = "imgCn"+ j; eName = "myFile"; eName = eName+jj;...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.