up vote 0 down vote favorite

I have 2 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>
share|improve this question
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 Dec 14 '12 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 Dec 14 '12 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 Dec 14 '12 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 Dec 14 '12 at 21:28
i just added my code. see the main post please! – saghar Dec 14 '12 at 21:36
show 2 more comments
feedback

2 Answers

up vote 0 down vote

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.

share|improve this answer
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... – Trufa Dec 14 '12 at 21:51
No offense! I was just saying this because it's really a simple matter. – MahanGM Dec 14 '12 at 21:58
feedback
up vote 1 down vote

okay 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'];
?>
share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.