AJAX help with dynamic select. 1

[petrosky]

Hi there,

I have a select box that fires this onChange event.

var xmlhttp;

function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

It calls this php page.

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', 'xxxxxxxx');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("neworders", $con);

$sql="SELECT * FROM customercontacts WHERE CustomerContactID = '".$q."'";

$result = mysql_query($sql);

echo "<table style='width:100%'>";

$row = mysql_fetch_array($result);
 
  echo "<tr><td style='width:50%'>Phone</td><td style='width:50%'><input type='text' name='ContactPhone' value='" . $row['ContactPhone'] . "'></td></tr>";
  echo "<tr><td>Fax</td><td><input type='text' name='ContactFax' value='" . $row['ContactFax'] . "'></td></tr>";
  echo "<tr><td>Email</td><td><input type='text' name='ContactEmail' value='" . $row['ContactEmail'] . "'></td></tr>";
  echo "<tr><td>Mobile</td><td><input type='text' name='ContactMobile' value='" . $row['ContactMobile'] . "'></td>";
  echo "</tr>";

echo "</table>";

mysql_close($con);
?>

This works great when a user is adding a new quote/order as the customer contact details are populated by the code above.

What I am looking for is when a user is editing an existing quote/order. The php page displays the correct value for the CustomerContact but their details (phone/email etc) remain hidden until the onChange event fires.

Is there some way to get the Javascript routine to fire in the event of the select box already having another entry selected?

I have tried putting the code in the onLoad event of the pages body.

Any ideas would be appreciated.

Peter.

Remember- It's nice to be important,
but it's important to be nice

 

[BillyRayPreachersSon]

Yes it should be possible.

Seeing the client-side select box code and what it actually does 'onchange' would be nice to know, though.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[petrosky]

Hi Dan,

Thanks for responding. Here is the PHP code for the dynamic select...

<select name="CustomerContactID" onchange="showUser(this.value)">
		<option  value ="0">-Select Contact-</option>
<?php
// Build the SQL for the Contact Select
$sql = "Select CustomerContactID, ContactName FROM customercontacts WHERE CustomerID = ".$CustomerID." ORDER BY ContactName ASC";
	
// Run the query.
$results = conn($sql);

//Loop through the recordset.
while ($row = mysql_fetch_row($results)){


$selected = "";

if( $ContactName == $row[1]) {
    $selected = "selected";
}

$display .= '<option value="'.$row[0].'"'  . $selected . ">" . $row[1] . "</option>\n";

} // End while loop.
echo $display;
	
?>
</select>

Remember- It's nice to be important,
but it's important to be nice

 

[BillyRayPreachersSon]

The first thing you need is a pointer to your select element. Then, you need to call the function passing through the select element's value.

Assuming your form is named 'myForm', this should work:

var selObj = document.forms['myForm'].elements['CustomerContactID'];
showUser(selObj.value);

Note: When asked for client-side code, providing PHP code is pointless - because it is NOT client-side code.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[petrosky]

Hey Dan,

Thanks for replying. I am a javascript noob. Where would I place the "pointer" to the select element?

Remember- It's nice to be important,
but it's important to be nice

 

[BillyRayPreachersSon]

Anywhere you like inside a script block or other place that accepts script.

Perhaps you have a function that is called 'onload' that would do?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[petrosky]

Many thanks for your help. It worked a treat in the onload event of the page.

Remember- It's nice to be important,
but it's important to be nice