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

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>

where is the subject_id coming from? I can see only book_id listed in the code. For subject_id do you need to query again? Please give more details. — ashoka, Jul 05 '13 at 03:50
@ashoka I have already loaded subject(in select option) as well book_id(or call subject_id) using php. what I want is when any subject(which is loaded in select option field) is selected(onchange event) ajax is used to carry that event and bring required book_id in but how to do it. — Chiranjibi Adhikari, Jul 05 '13 at 06:13
Your code here seems to have a few issues, pointed out by other users : 1. ' — Carlo Moretti, Jul 05 '13 at 07:28

score 1 · Answer 1 · edited Jul 05 '13 at 12:26

1

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'];

edited Jul 05 '13 at 12:26

will-hart

3,742
2
38
48

answered Jul 05 '13 at 04:36

Neel

19
1

you don't fetch data base data with ajax, you fetch it with PHP – Carlo Moretti Jul 05 '13 at 07:23
@Onheiron thanks! I've done good search on this topic and got good knowledge. – Chiranjibi Adhikari Jul 05 '13 at 09:50

score 1 · Accepted Answer · answered Jul 05 '13 at 12:15

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>

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

2 Answers2

Linked