updating textbox based off dynamic drop down list from DB
Posted: Sun Oct 23, 2011 9:45 pm
Hello, I have looked for numerous examples, and have only got part of the answer.
I have successfully populated a drop down list by reading the database.
It populates with a list of quest titles. Once the user selects the quest.
I want a textbox to populate with the Quest Description. This where I run into problems.
I found an example that uses AJAX/PHP to do this, but it doesn't access a db to read/populate.
The main code is in index.html
The original example you select a country, and it populates a text field with the currency code.
It passes a variable called $country to another file called find_ccode.php.
I changed the first case in find_ccode.php to access my database, and populate the text box with quest description.
Ideally I will like to make this case dynamic based off QuestID, would populate textbox with corresponding Quest Description (QDescrip).
I then tried the other way in index.php
I dynamically populated the dropdown list, and gave the option values the QuestIDs to be passed to $country, but something isn't working.
I have a write files command to let me know what the $country variable is passing, and it never writes. It works in index.html though.
I apologize in advance for my amateurish coding. I still have a lot to learn. I have included the code below, but if you know a more elegant way of doing it. I am creating a role-playing game, as you probably have figured out by now. I hope to one day put it on the web, but right now using it as a way of learning html, and PHP.
I really want to know how to catch the value of the dropdown box. I would like to know what it is before sending over.
also what is this.value. I assume this is what the value of the dropdown box is when you have selected something.
I have been beating my head for days trying to figure this out. Any help is very much appreciated!
Index.html
Index.php
I have successfully populated a drop down list by reading the database.
It populates with a list of quest titles. Once the user selects the quest.
I want a textbox to populate with the Quest Description. This where I run into problems.
I found an example that uses AJAX/PHP to do this, but it doesn't access a db to read/populate.
The main code is in index.html
The original example you select a country, and it populates a text field with the currency code.
It passes a variable called $country to another file called find_ccode.php.
I changed the first case in find_ccode.php to access my database, and populate the text box with quest description.
Ideally I will like to make this case dynamic based off QuestID, would populate textbox with corresponding Quest Description (QDescrip).
I then tried the other way in index.php
I dynamically populated the dropdown list, and gave the option values the QuestIDs to be passed to $country, but something isn't working.
I have a write files command to let me know what the $country variable is passing, and it never writes. It works in index.html though.
I apologize in advance for my amateurish coding. I still have a lot to learn. I have included the code below, but if you know a more elegant way of doing it. I am creating a role-playing game, as you probably have figured out by now. I hope to one day put it on the web, but right now using it as a way of learning html, and PHP.
I really want to know how to catch the value of the dropdown box. I would like to know what it is before sending over.
also what is this.value. I assume this is what the value of the dropdown box is when you have selected something.
I have been beating my head for days trying to figure this out. Any help is very much appreciated!
Index.html
Code: Select all
<html>
<head>
<title>Changing textbox value based on dropdown list using Ajax and PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
//fuction to return the xml http object
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCurrencyCode(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('cur_code').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">
<form style="text-align:center" method="post" action="" name="form1">
<p style="color:#000099 ">When you change the dropdown list, the respective currency code of the country will be displayed in the textbox which is fetched from PHP using Ajax. </p>
<p>Country : <select name="country" onChange="getCurrencyCode('find_ccode.php?country='+this.value)"
<?php
mysql_connect('localhost', '$user', '$password');
mysql_select_db('sok');
$result = mysql_query('select QuestID,QTitle, QDescrip from QuestList');
$options="";
while ($row=mysql_fetch_array($result)) {
$QuestID=$row["QuestID"];
$QTitle=$row["QTitle"];
$options.="<OPTION VALUE=\"$QuestID\">".$QTitle;
}
?>
<option value="">Select Country</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">Nepal</option>
</select><br/><br/>
Currency : <input type="text" name="cur_code" id="cur_code" ></p>
</form>
</body>
</html>Code: Select all
<html>
<head>
<title>Changing textbox value based on dropdown list using Ajax and PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
//fuction to return the xml http object
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCurrencyCode(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('cur_code').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">
<form style="text-align:center" method="post" action="" name="form1">
<p style="color:#000099 ">When you change the dropdown list, the respective currency code of the country will be displayed in the textbox which is fetched from PHP using Ajax. </p>
<p>Quest : <select name="country" getCurrencyCode('find_ccode.php?country='+this.value)">'
<?php
mysql_connect('localhost', '$user', '$password');
mysql_select_db('sok');
$result = mysql_query('select QuestID,QTitle, QDescrip from QuestList');
$options="";
while ($row=mysql_fetch_array($result)) {
$QuestID=$row["QuestID"];
$QTitle=$row["QTitle"];
$options.="<OPTION VALUE=\"$QuestID\">".$QTitle;
}
$myFile = "test_catchoption.txt";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $options);
fclose($fh);
?>
Choose your Quest
<?=$options?>
</SELECT>
<br/><br/>
Quest Description : <input type="text" name="cur_code" id="cur_code" ></p>
</form>
</body>
</html>
find_ccode.php
<?php
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
$country=$_REQUEST['country'];
$myFile = "testFilefindcc.txt";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $country);
fclose($fh);
switch($country)
{
case "1" :
mysql_connect('localhost', '$user', '$password');
mysql_select_db('sok');
$result = mysql_query("select * from QuestList where QuestID = '1'");
$row = mysql_fetch_assoc($result);
echo $row['QDescrip'];
break;
case "2" :
echo "GBP";
break;
case "3" :
echo "NPR";
break;
}
?>