Populate textfield from dropdown

php/mysql/js

[RussellC]

I know I have done this before but I havent programmed in a while and I can't seem to figure it out. I have a DB with ID, item, unit, and cost where item is the name of the item, unit is the unit of measure (i.e. - per hour or per day etc..) and cost is the price per unit.

Now, I have a form that auto generates and item dropdown list from the DB. Then there 2 text fields - one to enter quantity and one to enter price. What I want to happen is when an item is selected, the price per item goes in the price text field automatically and then next to the quantity field it changes to 'per hour' etc..

Thanks for the help.

[cameraman]

You would need to do this in javascript; you could use php to set up an array between javascript tags for the js to read, or perhaps stuff the info into the list items' values and parse it out with the javascript.

[RussellC]

does anyone have any examples? I dont think i know how to do this.

[d40sithui]

Or you can use AJAX!
Something Like Such
First your have your AJAX functions in the same file as your form
---------------
<script>
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

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

function populate(form)
{
var item_id= f1.item.options[f1.item.options.selectedIndex].value;
if (item_id.length==0)
{
document.getElementById("item_info").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="get_item_info.php";
url=url+"?item_id="+item_id;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

</script>

<form name="f1" action="action.php" method=POST>
<Select name="item" onchange="populate(this.form)">
<!-- item drop downs here -->
</select>

<!-- the div portion will change notice the "item_info in the ajax functions above -->
<div id="item_info">
Price:<input type=text name="price">
Quantity:
</div>

</form>

---------------------------------------------
Then you'll need another script, "get_item_info.php" which will retrieve the item info that was passed and print out text field, quantity, etc.
it'll be probaly be something like this
<?

//make connection to database
//retrieve item_id via $_GET or $_REQUEST
//run the sql to find price and quantity using item_id
echo "div id=\"item_info\">\n";
echo "Price:<input type=\"text\" nam="price\" value=\"$price\">\n";
echo "Quantity: $quantity\n";
echo "</div>\n";

?>

[RussellC]

ohh i will try it out and get back to you...thanks a bunch