[SOLVED] Populating text areas with a value from a combo box

JavaScript and client side scripting.

Moderator: General Moderators

jamesloi
Forum Newbie
Posts: 15
Joined: Thu Jul 15, 2004 5:11 am
Location: London

[SOLVED] Populating text areas with a value from a combo box

Post by jamesloi »

Hi,

I have a combo box which displays a field 'Name' from my database table. What
i want to do is popluate text areas with another field from the same table i.e
Address, Postcode every time the combo box is value changed..

I have a table with fields: Name,Address1,Address2,Postcode

My combo box is linked to the Name field using a mySql query..

On my form i have a combo box and 3 textareas for Address1,Address2 and
postcode..

When the user selects a name in the combo box i want the text areas to
populate with the correct Address etc. data for that name.. I wish this to be
done dynamically and not to load a new page..

This is the code i am using for my combo box..

Code: Select all

<?php
 
mysql_select_db($dbName); 

$sql="SELECT * FROM Supplier";  

$result=mysql_query($sql); 

echo select name="myselect" size="1"><option style="color: blue" 
value="opt1">Supplier</option>"; 

while ($rows=mysql_fetch_array($result)){ 

$option= $rows['Supplier_ID']; 
$option2= $rows['Name']; 

echo ("<option style="color: blue" value="$option">$option  
$option2</option>"); 
} 

echo "</select><br/><br/>";

?>
Im thinking along the lines of creating a PHP function in the onChange event
of the combo box.. but im not sure how to do this dynamically i.e. not having
to goto another page.

Any help would be greatly appreciated :)
Last edited by jamesloi on Sat Jul 24, 2004 3:27 pm, edited 3 times in total.
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

For starters, you cannot run a PHP function on the onChange event without loading a new page, PHP is server side, so information needs to be sent to the server, then the servers sends you something back.

What you need to do (if the amount of data isn't too great) is load all the data into the page.

A great example of how this is done using Javascript can be found at http://www.autotrader.co.uk

Look at the select boxes to the left of the page, when you change one, the other changes. All the information is stored in Javascript Arrays.

Moving this to client side.

Mark
jamesloi
Forum Newbie
Posts: 15
Joined: Thu Jul 15, 2004 5:11 am
Location: London

Post by jamesloi »

Hi mate,

I had a look at the autotrader site, and from what i see is that the combo boxes are changing as a result of a selection on the first box..

What i am trying to do is put text into a text area when my combo box value is changed
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Sorry to say but a page reload is the only way to do it using PHP. Once the HTML is on the client that is it. No changes.

An alternative would be to use Javascript. (That is what the onChange value normally uses). Of course this is only usable if the client uses javascript.

As a brief outline (sorry don't have time to code it)...

PHP loads all information: and populates 3 hidden Select Boxes for the Postcode Address1 and Address 2. The Onchange javascript gets the index of name and fills in the approriate textreas based on values of the hidden select boxes using the same index as the selected one.

Unfortunately you need all the data accessable to the javascript which will increase the size of the page, even if that information is hidden.
jamesloi
Forum Newbie
Posts: 15
Joined: Thu Jul 15, 2004 5:11 am
Location: London

Post by jamesloi »

Hi,

Thanks for the quick replies.. As i am a newbie is there any chance of getting some code examples :D
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Had to admit didn't think of using javascript arrays for the hidden data but definately a better solution. Would have to look at it in more detail
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

well, this would work for what you need ..........


index.php

Code: Select all

<html>
<head><title>Blah</title>
<script language="javascript">
function populate_them_all(fname, lname, city)
&#123;
   document.myform.summary.value = 'First Name : ' + fname + '\n' + 'Last Name : ' + lname + '\n' + 'City : ' + city;
&#125;
function query_my_db(myselection)
&#123;
   MyPHPPageFrame.location.replace('queryscript.php?selection='+myselection);
&#125;
</script>
</head>
<body>
<?php 
mysql_connect('localhost','user','pass') or die(MySQL_Error());
mysql_select_db('mydb') or die(MySQL_Error()); 
$sql="SELECT * FROM Supplier";  
$result=mysql_query($sql); 

echo '<select name="myselect" size="1">
         <option style="color: blue" value="opt1">Supplier</option>';

while ($rows=mysql_fetch_array($result))
&#123; 
   $option= $rows&#1111;'Supplier_ID']; 
   $option2= $rows&#1111;'Name']; 
   echo '<option value="'.$option.'" onclick="javascript:query_my_db($option);">'.$option.' '.$option2.'</option>'; 
&#125; 

echo '</select><br/><br/>'; 

?> 
<form name="myform">
  <textarea name="summary"></textarea>
</form>
<frame name="MyPHPPageFrame" style="width:0px; height:0px; border:0px" scrolling="no" src="">
</body>
</html>

queryscript.php

Code: Select all

<?php
$val = $_GET&#1111;'selection'];
mysql_connect('localhost','user','pass');
mysql_select_db('whatever');
$sql = "select * from mytable where Supplier ID = '".$val."'";
$result = mysql_query($sql) or die(MySQL_Error());
$row = mysql_fetch_assoc($result);
$fname = $row&#1111;'fname'];
$lname = $row&#1111;'lname'];
$city = $row&#1111;'city'];
?>
<script language="javascript">
function doit()
&#123;
   var fname = '<?php echo $fname; ?>';
   var lname = '<?php echo $lname; ?>';
   var city = '<?php echo $city; ?>';
   window.parent.populate_them_all(fname,lname,city);
&#125;
window.onload = doit;
</script>
of course, you'll need to change the fields to be what you need it to be, the names to what you need, etc, etc...

but at least this should give you an understanding of how this can be accomplished without the need to refresh the page..

gotta love remote scripting 8)
jamesloi
Forum Newbie
Posts: 15
Joined: Thu Jul 15, 2004 5:11 am
Location: London

Post by jamesloi »

Thanks
jamesloi
Forum Newbie
Posts: 15
Joined: Thu Jul 15, 2004 5:11 am
Location: London

Post by jamesloi »

Hi Infolock,

I have implemented this code without any errors showing but nothing happens when i click on my combo box, i think there might be a problem with the onClick event ..

onclick="javascript:query_my_db($option);"

but im not too sure, any help would be appreciated. HELP :D
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

you can try it like this if you want :

Code: Select all

echo '<option value="'.$option.'" onclick="javascript:query_my_db('.$option.');">'.$option.' '.$option2.'</option>';
but it shoudl work either way.. unless javascript is going to treat $option as it's own variable..

anyways, if nothing is happening, maybe it's because you didn't setup the files correctly, or the db/table/fields are wrong?

got any code to show what you did differently?
User avatar
Joe
Forum Regular
Posts: 939
Joined: Sun Feb 29, 2004 1:26 pm
Location: UK - Glasgow

Post by Joe »

Im not a big user of JS but perhaps it's because your browser does not enable javascript of any sort... (Have a look at your browser properties)
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post by Vincent Puglia »

Hi,

I'm not a phper, but can code a bit of respectable javascript (according to others), so take whatever I say about php with a grain of salt :)

1) I'm somewhat confused as to what '$option2' is
2) could you post a link to the 'rendered' page? Perhaps the php isn't writing out the select list correctly.
3) an alternative to writing out the hidden selects is to place the php arrays themselves (the results of the original query + whatever else you need) in javascript arrays (either initially within the page itself, or after a server call by writing to a hidden iframe src -- and notify the parent with onload)

Vinny
User avatar
infolock
DevNet Resident
Posts: 1708
Joined: Wed Sep 25, 2002 7:47 pm

Post by infolock »

Vincent Puglia wrote: 1) I'm somewhat confused as to what '$option2' is

Code: Select all

//....code....

$option2= $rows['Name']; 

//....code....
Vincent Puglia wrote: 3) an alternative to writing out the hidden selects is to place the php arrays themselves (the results of the original query + whatever else you need) in javascript arrays (either initially within the page itself, or after a server call by writing to a hidden iframe src -- and notify the parent with onload)
only problem i see with this is you are taking an unecessary step, thus lenghening the speed of the code. if it is already returning the array values, there is really no need to create a new array to return the exact same values. i'm not knocking the suggestion, just saying it's kinda redundant to do it that way
User avatar
Joe
Forum Regular
Posts: 939
Joined: Sun Feb 29, 2004 1:26 pm
Location: UK - Glasgow

Post by Joe »

I'm not a phper, but can code a bit of respectable javascript (according to others), so take whatever I say about php with a grain of salt
Same go's with me with javascript although I know basic stuff to get me through whenever I require it!
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post by Vincent Puglia »

Hi infolock,

I agree that writing to an iframe is somewhat redundant, even moot, when there is only one sql query. However, I was presuming the arrays were being built dynamically (thus requiring multiple server calls) and that jamesloi didn't want to lose whatever detail/form element values already entered by the client. In that case, using an iframe document to hold the data is probably the only way to make sure the 'main' page isn't refreshed. Then again, I could be misreading the entire problem.

Vinny
Post Reply