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
– ashoka, Commented Jul 5, 2013 at 3:50
Doesn't <?php <?php throw any error in getbook.php ? Because it should... PS, take care of that MySQL injection prone code available there. — Francisco Presencia
– Francisco Presencia, Commented Jul 5, 2013 at 4:25
@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 <input type="text" id="bookid" class="text-small"/> but how to do it. — Chiranjibi Adhikari
– Chiranjibi Adhikari, Commented Jul 5, 2013 at 6:13
Your code here seems to have a few issues, pointed out by other users : 1. '<?php<?php' 2. no echo in getbook.php 3. where and how do you select books by subject? Please fix these problems. Also try going to getbook.php with your browser and see what it prints out. — Carlo Moretti
– Carlo Moretti, Commented Jul 5, 2013 at 7:28

Chiranjibi Adhikari · Accepted Answer · 2013-07-05 12:15:09Z

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>

will-hart · Accepted Answer · 2013-07-05 12:26:31Z

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 5, 2013 at 12:26

will-hart

3,8312 gold badges41 silver badges51 bronze badges

answered Jul 5, 2013 at 4:36

Neel

191 bronze badge

2 Comments

Carlo Moretti Over a year ago

you don't fetch data base data with ajax, you fetch it with PHP

Chiranjibi Adhikari Over a year ago

@Onheiron thanks! I've done good search on this topic and got good knowledge.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related