[SOLVED] AJAX populating form fields from Select Drop Down

[ncosgrove]

Hi Folks,

 

I'm having some problems with PHP/AJAX/MYSQL. I've got as far as creating a select drop down with the product table, now what I wish to do is populate the remaining fields such as code/description/price. I have managed to get it so when a product is selected the product description appears in the description box. Please see the example at:

 

http://ncosgrove.com/order/order_new.php

 

What I need know is how to populate the other fields such as id and price at the same time. In its current format I only seem to be able to update one field. See below for the js and php code:

 

selectuser.js

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("product_description2").value=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;
}

 

getuser.php

<?php
header('Content-type: text/xml'); 
$q=$_GET["q"];

$con = mysql_connect('localhost', '<username>', '<password>');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("<db_name>", $con);

$sql="SELECT * FROM liv_product WHERE id = '".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result))
  {
  echo $row['description'];
  }

?> 

 

Any help would be greatly appreciated!

 

Many Thanks in advance.

 

[MadTechie]

this is down to the function stateChanged

 

i pulled this from your example site

 

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

 

What you "could do" is the following

 

function stateChanged()
{
if (xmlhttp.readyState==4)
{
var mySplitResult = responseText.split("|");
document.getElementById("product_description2").value=mySplitResult[0];
document.getElementById("id_product2").value=mySplitResult[1];
}
}

 

 

and in the PHP update

while($row = mysql_fetch_array($result))
  {
  echo $row['description'];
  }

to

while($row = mysql_fetch_array($result))
  {
  echo $row['description'];
  echo "|";
  echo $row['id'];
  }

[ncosgrove]

Thanks MadTechie,

 

I did what you said but it didn't seem to work, neither the id and description fields populated.

 

Are there any other ways round of doing this?

 

Cheers

[MadTechie]

I just ran a test, it seams you reverted back already,

so i can't say for sure why it failed,

 

but i did messup a line (see update)

function stateChanged()
{
if (xmlhttp.readyState==4)
{
var mySplitResult = xmlhttp.responseText.split("|"); //updated
document.getElementById("product_description2").value=mySplitResult[0];
document.getElementById("id_product2").value=mySplitResult[1];
}
}

[ncosgrove]

Wow, great works like a charm now...Many Thanks for your help 

[MadTechie]

Cool

 

if solved please click solved

[sunnypal]

Hi ncosgrove, I am trying something very similar to autopopulate form fields based on a fund code.

I read you were able to solve this, would you mind sharing your code?

 

Thanks in advance,

[MadTechie]

read the full post, as it hold the solution!

[sunnypal]

Thanks for pointing that out, I was a bit hasty but you were right. I just had to tweak it

a little with oracle connectivity calls as our db is an oracle and not mysql but it all worked great.

 

thanks

[MadTechie]

No worries, 

 

any problems just ask

[sunnypal]

I am able to retrieve all the values, however I am stuck with drop down box.

 

below is the code that I have to assign the database value as the selected value in the dropdown box :

 

var mySplitResult = req.responseText.split("|"); //updated

 

if(mySplitResult[6] == undefined){

document.inventoryForm.schDeptCode.options[document.inventoryForm.schDeptCode.selectedIndex].value='';

}

else

{

document.inventoryForm.schDeptCode.options[document.inventoryForm.schDeptCode.selectedIndex].value=mySplitResult[6];

}

 

But for some reason it is now able to assign the value from the database as the selected value for the drop down. I put:

alert(document.inventoryForm.schDeptCode.options[document.inventoryForm.schDeptCode.selectedIndex].value);

and it does show the retrieved value correctly but just cant seem to assign it to the dropdown box as the selected value.

 

However, the same code below works fine when it is a text box.

Once I enter the fund code, it hits the database and retrieves the title  and populates the text box with the fund title

 

if(mySplitResult[0] == undefined){

document.getElementById('schTitle2').value=''; } else {

document.getElementById('schTitle2').value=mySplitResult[0]; }

 

 

Any help on the dropdown box?

 

thanks,

[sunnypal]

 

I got it to work,

just a small change did it

  from

  document.inventoryForm.schDeptCode.options[document.inventoryForm.schDeptCode.selectedIndex].value=mySplitResult[6];

  to

 

  document.inventoryForm.schDeptCode.options[document.inventoryForm.schDeptCode.selectedIndex].text=mySplitResult[6];