?Notes of Harsha/>': Form Elements : PHP Dynamic Drop Down 'OnChange' Event

If you've gone through the last blog post about the creating a dynamic drop down element in PHP, this post might be even greater to go through as this is intended to explain the way to dynamically load the content to the drop down as well as make an 'onChange()' event to load further dynamic content from the back end. Let's go through the tutorial and you'd understand.

First, create the tables and insert data with the following MySQL scripts.

create table load_content
(
    id VARCHAR(10) NOT NULL,
    name VARCHAR(250) NOT NULL,
    CONSTRAINT pk_load_content PRIMARY KEY(id)
);

INSERT INTO load_content VALUES('101','Samitha');
INSERT INTO load_content VALUES('102','Janitha');
INSERT INTO load_content VALUES('103','Samitha');
INSERT INTO load_content VALUES('104','Janitha');

After running the scripts and creating the necessary MySQL tables in the database, you've to create the necessary Java Script and PHP files.

First Create the '2.php' file, with the Code provided below.

<html>
<head>
<script type="text/javascript" src="drop.js"></script>
<title>Notes of Harsha</title>
</head>

<body>

    <?php
  
  if(!isset($_GET['get_value'])) {
   
   
   echo '<form>';
   echo '<select name="load" onchange="load_content(this)">';
   include('db_config.php');  
   $query = "SELECT DISTINCT name FROM load_content";  
   $result = mysql_query($query);
   
   while($row = mysql_fetch_array($result)) {
    
     echo '<option value="'.$row['name'].'">';
     echo $row['name'];
     echo '</option>'; 
    
   }
   
   echo '</select>';
   echo '</form>';
  }
 
  if(isset($_GET['get_value'])) {
   
   $get_value = $_GET['get_value'];
   include('db_config.php');
   $query = "SELECT id FROM load_content WHERE name='$get_value'";
   $result = mysql_query($query);
   while($row = mysql_fetch_array($result)) {
     echo $row['id'].'<br/>';
   }
   
  }
?>

<div id="content_load"></div>
</body>
</html>

Then, create the javascript code in the 'drop.js' file and place it in the same directory as '2.php' is. This javascript code is intended to fire the function at the OnChange() event. It loads the output of the PHP code to the DIV id load_content.

function load_content(b)
{
 var str = b.options[b.selectedIndex].text;
 
 if (str=="") {
  
  document.getElementById("content_load").innerHTML="";
  return;
 }
 
 
 if (window.XMLHttpRequest) {
  
  xmlhttp=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
 }
 
 else {
  
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
 }
 
 xmlhttp.onreadystatechange=function() {
  
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    
   document.getElementById("content_load").innerHTML=xmlhttp.responseText;
   }
   
 }
 
  xmlhttp.open("GET","2.php?get_value="+str,true);
  
  xmlhttp.send();
}

Make sure to keep 'db_config.php' file in the same directory as other files does as we did in the previous PHP example with the loading dynamic content to drop down.


;&lt?php

 $host = "127.0.0.1";
 $uname = "root";
 $pword = "";
 $db_name = "test";

 mysql_connect( $host , $uname , $pword ) or die (mysql_error());
 mysql_select_db($db_name) or die(mysql_error()); 

?;&gt

Form Elements : PHP Dynamic Drop Down 'OnChange' Event

No comments: