CODEWITHSUNDEEP
javascriptphpdrop-down-menudom-eventsonchange
saghar
saghar

Reputation: 67

Dropdown onchange method using PHP and Javascript

I have two dropdown menus that read their data from a MySQL database. I use PHP for connecting to database. The second dropdowns should get populated based on the selection on the first dropdown. The process seems as below to me (correct me if I'm wrong):

  1. PHP section connects to MySQL database and populates dropdown1.
  2. user selects a value on dropdown1 and onchange event is called.
  3. within the onchange function (which is Javascript), a query is sent to MySQL database to fetch values of dropdown2 based on the dropdown1 selection (here is PHP again, right?).
  4. dropdown2 gets populated.

I don't know how to use Javascript and PHP together in order to do this task (number 3 above); or maybe this is not the way to do it at all. Please advise!

Here is my code. As you see below, I'm putting a Javascript function within a PHP code which I suppose is wrong. That's where I got stuck!

<php
$sql="SELECT distinct category FROM table1";
$result=mysql_query($sql);

$optionsCat="";
while($row = mysql_fetch_row($result)){
    $optionsCat.="<option value=\"$row[0]\">$row[0]</option>";
}

function genSubCat($catID){
$sql="SELECT distinct subcategory FROM table1 where category=".$catID;
$result=mysql_query($sql);

$optionsSubCat="";
while($row = mysql_fetch_row($result)){
    $optionsSubCat.="<option value=\"$row[0]\">$row[0]</option>";
}
}

?>
<select name="catDropDown" onChange="genSubCat(this)">
    <option value="0">Select category</option>
    <?php echo $optionsCat?>
</select>
<select name="subcategoryDropDown">
    <option value="0">Select subcategory</option>
    <?php echo $optionsSubCat?>
</select>

Upvotes: 0

Views: 13740

Answers (2)

ROY Finley
ROY Finley

Reputation: 1416

Here we have a simple page with input on it. Type a word into it and then click off of the input. Ajax will call the myphp.php script and return the same word you typed in below the original division.

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#faq_search_input").blur(function(){
   var faq_search_input = $(this).val();
   var dataString = 'keyword='+ faq_search_input;
   if(faq_search_input.length>1){
      $.ajax({type: "GET", url: "myphp.php", data: dataString,
              success: function(server_response) {
                 document.getElementById("searchresultdata").style.display = "block";
                 $('#searchresultdata').html(server_response).show();
              }
          });
       }
       return false;
   });
});

</script>
  </head>
  <body>
<div class="searchholder">
    <input  name="query" class="quicksearch" type="text" id="faq_search_input" />
<div id="searchresultdata" class="searchresults" style="display:none;"> </div>
</div>
  </body>
</html>

myphp.php: 

 <?PHP
    echo $_GET['keyword'];
 ?>

Upvotes: 1

MahanGM
MahanGM

Reputation: 2382

I think you should first study yourself about using web based languages. The code that you've provided is completely wrong. You're trying to access PHP code through HTML? I mean come on!

First rule: Server based languages can't communicate with Client based languages.

You have to send requests and get responses and the way you want to do that dropdown thing is to send a request to a PHP code and get relevant data from it. As Trufa said in the comment, you may want to look at jQuery library, but before that I think you need to check AJAX.

Upvotes: 0

Related Questions