populate input text boxes based on a selection from a drop-down menu

[murphyts]

Hello
I am trying to populate some input text boxes from a database based on a selection from a drop down menu which is dynamically populated from the same database.
I have a function in the head section of the page:

<script type="text/javascript">
<!--
function update(this)
{
var this = document.form.NameN.value
document.write.TruckN.this
document.write.TrailerN.this
document.write.PhoneN.this
}
//-->
</script>

and in the body:

<?php
$username="*";
$password="*";
$database="drivers";
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM drivers order by Name";
$result=mysql_query($query);
$num=mysql_numrows($result);
while ($row = mysql_fetch_object($result)){
$NameN = $row -> Name;
$MENU[$NameN]['TruckN'] = $row -> Truck;
$MENU[$NameN]['TrailerN'] = $row -> Trailer;
$MENU[$NameN]['PhoneN'] = $row -> Phone;
}
mysql_free_result($result);
mysql_close();
?>
<tr class="bodyClass">
<td><div align="center">
<form name="form" method="post" action="editdriver1.php">
<?php
echo "<select id=\"NameN\" name=\"NameN\" onchange=\"update(this)\" class=\"a_class\">\n";
echo "<option value=\"0\" selected >Choose a driver</option>\n";
foreach ($MENU as $_KEY => $_VAL){
echo "<option value=\"".$_KEY."\">".$_KEY."</option>\n";
}
echo "</select>\n";
?>
</div></td>
<td><div align="center">
<input name="TruckN" id="TruckN" type="text" value="" class="a_class" />
</div></td>
<td><div align="center">
<input name="TrailerN" id="TrailerN" type="text" value="" class="a_class" />
</div></td>
<td><div align="center">
<input name="PhoneN" id="PhoneN" type="text" value="" class="a_class" />
</div></td>
</tr>
</table>
<p>&nbsp;</p>
<table width="20%" border="0">
<COLGROUP span="2" width="0*">
<tr>
<td><div align="center">
<input type="submit" class="bUgi" name="Update" value="Update">
</form>

The drop-down menu is populated correctly and the page looks as expected, but when i make a selection nothing happens. I am not sure if the problem is with the javascript or with the php part, but i decided to post here. Help anyone?

 

[kaht]

You're doing it incorrectly. You might want to read up a bit on document.write - it's not used to write values to the screen dynamically like that. Instead, it's used to write text into the source of the page, at load time only. (remember that part I put in bold, it will help you out later) What that means is that if you try to use document.write dynamically (i.e. after the page has completed loading) it overwrites the content of the page. So, to fix your problem you likely need to do something like this:

function update([!]obj[/!]) {
   //don't use [!]this[/!] as a variable name, it's a reserved keyword in javascript
   var theForm = document.forms["form"];
   theForm.elements["TruckN"].value = obj.value;
   theForm.elements["TrailerN"].value = obj.value;
   theForm.elments["PhoneN"].value = obj.value;
}

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[monksnake]

Looks like your problem is in your function, you have this:

function update(this)
{
var this = document.form.NameN.value
document.write.TruckN.this
document.write.TrailerN.this
document.write.PhoneN.this
}

You aren't referencing "this" correctly and you aren't referencing the textboxes correctly, this is what you need:

function update(this)
{
var textboxValue = this.value;
document.getElementById("TruckN").value = textboxValue;
document.getElementById("TrailerN").value = textboxValue;
document.getElementById("PhoneN").value = textboxValue;
}

You grab "this" from your function. "This" is the <select> object, so you have to grab the value from it.

var textboxValue = this.value;

Then you need to set the textboxes equal to that value, since you already have these textboxes with id's, use document.getElementById() to reference those textboxes and set the value of the textboxes = to the value of the <select>.

document.getElementById("TruckN").value = textboxValue;

[


<.

 

[murphyts]

Thanks for the replies,
I got the javascript function, the problem now is how to extract and assign the correct value from the $MENU array to the javascript function