Tutorial? Populate multiple text fields based on dynamic drop-down lis

[criscokid]

I'd relly appreciate it if someone could please point me in the right directorion for a turial on how to populate multiple text fields based on a dynamic drop-down list selection (entries from a MySQL table).

I'm new to PHP and MySQL and I'm busy trying to build a page that when I select an item from a drop-down list, that has been populated from a MySQL table, it populates multiple text fields with the appropriate information from that table

For example, if I select "Venue 1" from the selection box then the text fields Heading, Address and Details get populated with "Venue 1", address of the venue, and a description of the venue.

[PHP_Chimp]

There are loads of tutorials on the web, so you could try a google search.
Or have a look at [webmasterworld.com...] as there are a load of resources that will help there.
Seeing as sitepoint is mentioned on that page you could try -
[sitepoint.com...]

[Caliber Mengsk]

<?
//Connect to database here.
$sql = mysql_query("SELECT * FROM databasename");
//technically you can disconnect from the database here...
//I don't 'til after the information is spread apart in PHP.
echo "
<script>
var myFields = Array()";

$i = 0;
$list = array();
while($row = mysql_fetch_array($slq))
{
echo "myFields[$i][0] = " . $row['fieldname'] . ";";
echo "myFields[$i][1] = " . $row['fieldname2'] . ";";
echo "myFields[$i][2] = " . $row['fieldname3'] . ";";
echo "myFields[$i][3] = " . $row['fieldname4'] . ";";
array_push($list, $row['pulldownName']);
//This would be your Venue 1, Venue 2
$i += 1;
//I've heard that some versions of PHP doesn't support ++.
}
//disconnect from database here.
echo "
function changed(sender)
{
document.getElementById('field1').value = myFields[sender][0];
document.getElementById('field2').value = myFields[sender][1];
document.getElementById('field3').value = myFields[sender][2];
document.getElementById('field4').value = myFields[sender][3];
}";
echo "</script>";

$i = 0;
echo "<select onChange='changed(this.value)'>";
foreach($list as $tmpList)
{
echo "<option name='$tmpList' id='tmpList' value='$i'>$tmpList</option>";
$i += 1;
}
?>

This is all if you can understand what I wrote. I've been mixing PHP and Javascript together for a while. I didn't check to see if this worked 100%, I just typed it up in the textbox here off the top of my head.

Even if it doesn't work, You should be able to get the jist of what I am doing.

Sending all of the database information into a multidimensional array in javascript, then using the onchange in the select for calling a javascript function to change the values.

If your information is filling in divs, then instead of
document.getElementById('field4').value = myFields[sender][3];
you would need
document.getElementById('field4').innerHTML = myFields[sender][3];

Hope this helps some!

[criscokid]

This is what I've managed to come up with so far (before Caliber Mengsk posted his reply). This is the first time I've created a selection list from a database so it's somewhat of an acheivement. :-) All that this bit of code does is create the drop down selection list.

<?php

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$result = mysql_query("SELECT venues.VenueName, venues.VenueAddress, venues.VenuePostCode, venues.VenueArea FROM Venues ORDER BY venues.VenueName");
?>

<form name="Events" method="post" action="<?php echo $PHP_SELF;?>">
<div align="center">
<table width="500" border="1" align="center" cellpadding="4" cellspacing="0">
<tr>
<td width="200" align="left">
<select name="Venue" id="Venue">
<option selected>Select</option>
<?php while ($row = mysql_fetch_array($result)){?>
<option><?php echo $row[VenueName];?></option>
<?php }?>
</select>
</td>
</tr>
</table>
</div>

Caliber Mengsk - I think I get the jist of what you've coded... Using your code I've substituted your field names to be the field names taken from the database.

At the moment my browser is complaining about a syntax error (Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in...) in this line:

var myFields = Array()<br />

I'm not sure how to fix this error so you help would be most appreciated.

[PHP_Chimp]

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$result = mysql_query("SELECT venues.VenueName, venues.VenueAddress, venues.VenuePostCode, venues.VenueArea FROM Venues ORDER BY venues.VenueName");

That is a good start. You need to use the $result with the mysql_fetch_array to return your result.
So in the code above your $result is the same as there $sql.

I would warn against using the @ to suppress errors, as if you are trying to figure out a problem with your script but are hiding all of the errors then you will be there for a very long time. You are also handling the main error that will be not connecting to the data base, so any other errors you may well want to see.

<edit>
The line var myFields = Array()"; I guess is from where this code has at one stage been javascript(or maybe another language, or from a php4 class). Just get rid of it and it will all work fine, or change it to $myFields = array(); As (im guessing) this was just initializing a blank array.

[edited by: PHP_Chimp at 2:29 pm (utc) on Nov. 11, 2007]

[Caliber Mengsk]

Well, the only issue that I can see from my code at
___________________________
echo "
<script>
var myFields = Array()";
___________________________

is that it's on a seaperate line. I add whitespace like this because it simply looks better if you click "view>source" to see the source code of a webpage. Try placing it all on one line, like this:
___________________________
echo "<script> var myFields = Array()";
___________________________

This is to initialize an array in javascript. (I tend not to use things like the type=javascript/text, as most current webbrowsers automatically choose javascript and css if they are not specified... this could also be the issue.)

This single array is then turned into a multi-dimensional array. (single[number] multidimensional[number][number]) I do this, so the first dimension is the id number (the value of the pulldown in this case) then the second dimension is the values of the fields to be entered. (array[pulldownid][fieldinformation])

[edit]
as for the mysql_fetch_array thing, I swapped two of the variable letters...
Currently it says mysql_fetch_array($slq)
and it should be mysql_fetch_array($sql)

One letter makes the entire difference in programming.

[edit again]
I should state that this may not be the proper way to make a multi-dimensional array in javascript.... I haven't needed to make one in javascript for a long time... PHP is a bit easier for varaibles (array or not) because all you have to do is set a value and php automatically defines it as a variable. Javascript does not do this, so that is why I defined it initially as an array...
There may have to be another line of code instead, something like
___________________________
echo "<script> var myFields = Array(Array())";
___________________________

But I think the method I used above should work.

[edited by: Caliber_Mengsk at 8:10 pm (utc) on Nov. 13, 2007]