Ajax and PHP change the value of select menu with the change in textbox
By Utsav on Feb 8, 2010 in AJAX, PHP, Tutorials | comments(0)
Today in this tutorial I shall teach you how to change the values of select menu with the change in textbox. For example if we type “a” in the textbox than the select menu should show all the names starting from “a” without loading the page and continue as the change in textbox.
Ok so let us start. First make the input form and call it “form.php”
<script language="javascript" type="text/javascript" src="search.js"></script><form name='myForm' style='padding-top: 10px; padding-bottom: 7px;'>
Type Value here:
<input type='text' name='searchQuery' id='searchQuery' onkeyup="ajaxSearch();" />
</form>
<div id='ajaxDiv'><?php include('search.php'); ?></div>
In the above form we first link the JavaScript file that will have the action for our job. The next part we create a form with textbox and assign an action on to it on “onkeyup” event. This will do the action when any new letter is typed in the textbox. And lastly we create a division where we will show the result.
Now, moving on to the JavaScript file. Name it “search.js”
function ajaxSearch() {
var ajax;
try {
ajax = new XMLHttpRequest();
} catch (e) {
try {
ajax = new ActiveXObject (“Msxml2.XMLHTTP”);
} catch (e) {
try {
ajax = new ActiveXObject (“Microsoft.XMLHTTP”);
} catch (e) {
alert (“ERROR: Your browser does not support AJAX.”);
return false;
}
}
}
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) { // when the action is complete.
var ajaxSearchResults = document.getElementById(“ajaxDiv”); // the place holder of the result.
ajaxSearchResults.innerHTML = ajax.responseText;
}
}
var searchQuery = document.getElementById(“searchQuery”).value; // get the value from the textbox.
var queryString = “?searchQuery=” + searchQuery; //add the string with the variable to pass to the file.
ajax.open (“GET”, “Search.php” + queryString, true); // set the method to send the variable and the filename attached with the variable.
ajax.send (null);
}
I have written what a specific line of code does along the line itself. Well the basic concept is we take the value from the textbox and attach it to the string and pass it to the file. And we specify the path to show the result.
Now creating the PHP file to find the result. Name it as “search.php”.
<?php
$conn=mysql_connect(‘localhost’,'root’,”) or die(“<h5 align=center>Could Not Connect to the Server</h5>”); // Connect to the Local server. Replace the values in the bracket with your server name, database username and password.
$db=mysql_select_db(“recess1″,$conn) or die(“<h5 align=center>Could Not Find the Databassse</h5>”);
// Connects to the db. replace “recess1” with your database name
$searchQuery = $_GET['searchQuery']; // Get the value from the variable.
$resultDiv = “”;
if ($searchQuery != “” || $searchQuery != null) { //check if value is null
$result = mysql_query(“SELECT * FROM category WHERE name like ‘$searchQuery%’ ORDER BY id desc”); // Replace category with your tablename. And make modifications as your need.
$resultDiv = “<div style =’padding-bottom: 10px;’>”;
$resultDiv .= mysql_num_rows($result); // count the number of rows returned by the query
$resultDiv .= ” entries found for “;
$resultDiv .= ‘”‘ . $searchQuery . ‘”‘;
$resultDiv .= “</div>”;
if ($result != false || $result || (mysql_num_rows ($result)> 0)) { //if more than 0 results are found then display them in select menu.
$i = 1;
?><select> //start the select box.
<?php
while ($row = mysql_fetch_array ($result)) { // while there are rows
?>
<option>
<?php
echo $row['name']; // display the data.
?>
</option>
<?php
$str = “”;
$i++;
}
?>
</select>
<?php
}
echo $resultDiv;
}
?>
So what we do in this PHP file is that collect the value passed by the Get method and search for it in the database, and show it in the select menu. So at the end of this you have a Ajax powered Page that updates its select menu with the change in textbox. Find the source code of the working example here.
Today in this tutorial I shall teach you how to change the values of select menu with the change in textbox. For example if we type “a” in the textbox than the select menu should show all the names starting from “a” without loading the page and continue as the change in textbox.
Ok so let us start. First make the input form and call it “form.php”
<script language=”javascript” type=”text/javascript” src=”search.js”></script>