Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamically Add Elements with Javascript?

Reply
Thread Tools

Dynamically Add Elements with Javascript?

 
 
Greg Scharlemann
Guest
Posts: n/a
 
      11-13-2006
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!

 
Reply With Quote
 
 
 
 
aaron.reese@tiscali.co.uk
Guest
Posts: n/a
 
      11-13-2006
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.

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      11-13-2006
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
 
Reply With Quote
 
macbis
Guest
Posts: n/a
 
      11-13-2006
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).


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to add several HTML elements to the web page dynamically using AJAX ton ASP .Net 3 08-22-2008 05:03 PM
Can I dynamically add new elements to vector while looping it? linq936@hotmail.com C++ 7 06-13-2006 01:09 PM
How do you add HTML elements dynamically? mouseit101@gmail.com Javascript 8 01-11-2006 07:05 PM
container elements for repeating elements ('element farms') needed? Wolfgang Lipp XML 1 01-30-2004 04:09 PM
container elements for repeating elements ('element farms') needed? Wolfgang Lipp XML 0 01-28-2004 02:50 PM



Advertisments