How can I display records from a database based on onchange event using Ajax/JavaScript?

Question

I want to display a select box based on a radio button selection. There are 2 radio buttons having the names "New project" and "Previous project". If the user select a previous project then the combobox will display using JavaScript.

From this combobox the user have to select the id of his/her previous project and based on this project id some data are filled into textboxes and comboboxes using JavaScript or Ajax.

What is the solution?

Answer 1

1. index.html

The page loads the suggest.js file wherein the searchSuggest function is described. The keyboard event handler in this occasion is the onkeyup which checks for each letter that is being entered in the textbox. A div element is also created so that the data that has been passed by JavaScript can be handled.

2. suggest.js

    var searchReq = getXmlHttpRequestObject();

This above line creates a httpRequest object for passing values.

    function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
    var str = escape(document.getElementById(’PoNumber’).value);
    searchReq.open(”GET”, ’searchSuggest.php?search=’ + str, true);
    searchReq.onreadystatechange = handleSearchSuggest;
    searchReq.send(null);
    }

}

str gets the value from the textbox. Each word entered in the text box is being passed to this variable which forms a part of the function. Later the values are passed on to the searchSuggest.php file which does all the processing.

var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}

curLeft defines the current left position which is being initialize to 0 as the begining. offsetparent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. offsetParent returns null when the element has style.display set to “none”. Since the element can be inside many hierarchies we loop along with each of them to get hold of the value.

ss.setAttribute(’style’,'position:absolute;top:’+curTop+’;left:’+curLeft+’;width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;’);

Here ss represents document id of the layer. In the above line the style property of the div tag is being set. The position should always be absolute else the layer will not be formed. The lower elements will be pushed down to accommodate the values that are being retrieved from the database. The top , left etc. are also being put to show to drop down (div layer). overflow is also set so for the scrolling effect in the div tag when it crosses the defined height .

The other stuff in the file should be self explanatory as it declares the variables and the functions.

3. database.php

   function db_connect($server = 'localhost', $username = 'root', $password = 'enigma', $database = 'suggest', $link = 'db_link')

Please change the server , username , password and database name corresponding to yours.

4. searchSuggest.php A self-explanatory file. This retrieves the data from the database and passes the output to the searchSuggest function in suggest.js.

Answer 2

I suggest you start learning jQuery. Have a look at jQuery for Absolute Beginners Video Series

In this tutorial you will learn quickly and practical how you can easily deal with creating AJAX requests using jQuery.

Answer 3

You need to use the post function from jQuery ( http://api.jquery.com/jQuery.post/ ). Create a new PHP file in which you load your data and create a JavaScript function to fill the textboxes with the returned data.

HTML:

<input type="text" name="srcTextbox" value="test" />
<input type="text" 
       name="destTextbox" 
       onchange="$.post('get_values_from_db.php', { id : $('srcTextbox').value } , function(data) { $('destTextbox').value = data; });" />

PHP (get_values_from_db.php):

<?php
    $id = $_POST['id'];
    //Get data here with the id from srcTextbox.
    echo $data;
?>