Loading data from database with php and pure ajax in a textbox - php

Question

i have one dropdown list which has data for "subjects" loaded from database. when i clicked on one subject what it should do is load related "subject_id" value inside textbox which is just below dropdown list option. i dont know how to bring value from getbook.php and show in book_ID input text.
show_bookid(str) {
var xmlhttp;
if (str.length == 0) {
document.getElementById("bookid").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
strong text
xmlhttp = new ActiveXOjbject("Microsoft.XMLHttpRequest");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("bookid").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getbook.php?q=" + str, true);
xmlhttp.send();
}
getbook.php
<?php
<?php
$b = $_GET['q'];
include('includes/security.php');
include('includes/dbconnect.php');
$database = new MySQLDatabase();
$sql = "select * from tbl_bkcat where book_id='" . $b . "'";
$result = mysql_query($sql);
?>
?>
below is the File where i need to bring value
<form name="bookadd" action="" class="jNice" method="post">
<p>
<label>Subject</label>
<select name="subject" onChange="show_bookid(this.value);">
<?php while($sel_rows=mysql_fetch_array($subresult)) { ?>
<option value="<?php echo $sel_rows['book_id'];?>">
<?php echo $sel_rows[ 'subject']?>
</option>
<?php } ?>
</select>
</p>
<p>
<label>Book_Id</label>
<input type="text" id="bookid" class="text-small" />//where i need to load subject id</p>

Answer 1

The mistake was done at ajax part document.getElementById("bookid").innerHTML and must be replaced with document.getElementById().value since I had to put data to Html Element that cotain value i.e Textbox(as textbox contain value attribute).
InnerHTML is used to manipulate the html elements that does not contain value,
** div,h1, ** etc. for details see below link.
http://www.verious.com/qa/what-39-s-the-difference-between-document-get-element-by-id-quot-test-quot-value-and-document-get-element-by-id-quot-tes/
ajax code
function show_bookid(str)
{
var xmlhttp;
if(str.length==0)
{
document.getElementById("bookid").value="";
return;
}
if(window.XMLHttpRequest)
{
xmlhttp= new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXOjbject("Microsoft.XMLHttpRequest");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("bookid").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getbook.php?q="+str,true);
xmlhttp.send();
}
getbook.php
<?php
$b=$_GET['q'];
include('includes/security.php');
include('includes/dbconnect.php');
$database=new MySQLDatabase();
$sql="select * from tbl_bkcat where book_id='".$b."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);
echo $row['Book_id'];
?>
addbook.php
<form name="bookadd" action="" class="jNice" method="post">
<fieldset>
<p><label>Subject</label>
<select name="subject" onChange="show_bookid(this.value);">
<?php
while($sel_rows=mysql_fetch_array($subresult))
{
?>
<option value="<?php echo $sel_rows['book_id'];?>">
<?php echo $sel_rows['subject']?>
</option>
<?php
}
?>
</select>
</p>
<p>
<label >Book ID</label>
<input type="text" id="bookid" name="book"/>
</p>

Answer 2

Your subject_id is not displaying because you have not printed your book_id after fetching results from database in getbook.php
After this $result=mysql_query($sql);
Write echo $result['your_book_id_field_name'];