Dynamically Add Elements with Javascript?

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

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

Nov 13 '06 #1

Subscribe Post Reply

7968

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.

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>
 <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" />
</p>
<p><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>
</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

macbis

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

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

Javascript

simple js dynamically reading form values - js fails - why?

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

Javascript

Access dynamically created Form elements

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

Javascript

IE6 won't hide dynamically created span elements

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

Javascript

Accessing HTMLControls created dynamically using Javascript during PostBack

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

ASP.NET

Help needed!

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

Javascript

Modifying A tag onclick events dynamically - am I crazy

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

Javascript

How to validate multiple dynamically named form fields?

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

Javascript

Fetching properties from a dynamically generated input element

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

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

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

Data Management

Migrating Website to Cloud - Emmanuel Katto

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

General

Navigating the Data Structures and Algorithms (DSA)

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

Algorithms / Advanced Math

How to build RAID in BIOS?

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

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Dynamically Add Elements with Javascript?

Similar topics