Dropdown onchange method using PHP and Javascript - Stack Overflow

admin管理员组

文章数量:1431752

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>

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>

• javascript
• php
• drop-down-menu
• dom-events
• onchange

Share Improve this question Follow edited Mar 20, 2020 at 22:48 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 14, 2012 at 21:20 sagharsaghar 6711 gold badge33 silver badges1010 bronze badges 6

• 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 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 mon to use for such task. – 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 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 remend posting some code of yours with what you tried to do, people always appreciate that and makes them more prone to answer. – Trufa Commented Dec 14, 2012 at 21:28
• i just added my code. see the main post please! – saghar Commented Dec 14, 2012 at 21:36

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

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

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

First rule: Server based languages can't municate 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 ment, you may want to look at jQuery library, but before that I think you need to check AJAX.

本文标签： Dropdown onchange method using PHP and JavascriptStack Overflow