Dropdown onchange method using PHP and Javascript

Question

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):

PHP section connects to MySQL database and populates dropdown1.
user selects a value on dropdown1 and onchange event is called.
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?).
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>

Have you tried jQuery? it makes this kind of things easier most of the times. (There is nothing wrong with using javascript of course!) — Trufa
– Trufa, Commented Dec 14, 2012 at 21:23
no, i haven't. actually that's what i'm trying to understand. i'm a bit confused what's more common to use for such task. — saghar
– saghar, Commented Dec 14, 2012 at 21:24
once i figure this out, i still need to know how php and javascript/jquery would pass values to each other (look at number 3). — saghar
– saghar, Commented Dec 14, 2012 at 21:27
jQuery is just a javascript library, so underneath it is always javascrpit you are executing, it has a bunch of really usefull functions that can help you in this kind of situations, If you'd like to see what's it about, you could change one of your tags to jQuery and read the code people answer with, it's really easy to learn. As a side note, I recommend posting some code of yours with what you tried to do, people always appreciate that and makes them more prone to answer. — Trufa
– Trufa, Commented Dec 14, 2012 at 21:28

Kelvin Low · Accepted Answer · 2017-08-25 02:55:03Z

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'];
 ?>

MahanGM · Accepted Answer · 2012-12-14 21:46:58Z

0

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.

answered Dec 14, 2012 at 21:46

MahanGM

2,3925 gold badges32 silver badges48 bronze badges

2 Comments

Trufa Over a year ago

Hey, everybody has to start somewhere, also, the reason I suggested jQuery is specifically because of AJAX, because AJAZ sucks :) and jQuery makes it stupid simple...

MahanGM Over a year ago

No offense! I was just saying this because it's really a simple matter.

Collectives™ on Stack Overflow

Dropdown onchange method using PHP and Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related