在第一个文本框中键入时，在第二个文本框中获取mysql数据

Question

This is the screen

the php file named "fetching_book_title_for_barcode.php".

<?php
require_once('db.php');

$response=array();

$sql="select book_title from book where barcode_id LIKE '%".$_POST['value']."%'";

$result=mysql_query($sql);

if(mysql_num_rows($result)){

    $book_title=mysql_fetch_assoc($result);

    $response["book_title1"]=$book_title;
    }
    echo json_encode($response);   
?>

Here is the java script file with some ajax call.

var searchTimeout;//Timer to wait a little before fetching the data
$("#barcode_id_textBox").keyup(function() {
    var searchKey = this.value;

    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(function() {
        barcodeTextboxFill(searchKey);    
    }, 400); //If the key isn't pressed 400 ms, we fetch the data
});
function barcodeTextboxFill(searchKey){
     $.ajax({
        url: 'fetching_book_title_for_barcode.php',
        type: 'POST',
        dataType: 'json',
        data: {value: searchKey},
        success: function(data) {
                $("#book_title_textBox").val(data);
        }
    }); 

}

The HTML

<input type="text" id="barcode_id_textBox">
<input type="text" id="book_title_textBox">

`I am making Library management system for my university according to their requirements.

In MySql database i have a table of book in which i inserted the book records in which one of the column is for barcode id and one of the column is for book title.

I have an html page on which i have 2 inline textboxes, one of which is for barcode id and the other one is for book title.

Now i want that when barcode id is entered then at the same time the book title fetched from the database and showed in the book title's textbox.

I tried alot on it but i didn't find any solution. I tried it through ajax but i didn't get the required answer. what is the problem in it?

everyone help would be appreciated. Thanks in advance.

Answer 1

Use AJAX and jQuery.

In your text box add an onChange like so, <input type="text" id="barcodeTextBox" onChange="BarcodeBoxFill()">, the onChange will call the JS function BarcodeBoxFill() whenever the text box is altered.

Then the JS function should take the input from the box, var text = $('#barcodeTextBox').val()

Then on the same function should be your AJAX call which passed the value of the text box as a parameter. Then in the page the AJAX calls will be some SQL that gets the right value for the other box, (in this case the book title). As the success part of the AJAX you can change the value of the other text box,

success: function(data) {
    $('#bookTitleTextBox').val(data);
}`