PHP/MySQL Dyanmic Dropdown boxes on a single page

Hello,

I am writing a PHP/MySQL web application for an auto parts website.

I wanted to have 4 dynamic dropdown boxes that will update its display when the OnChange event is triggered. Values in the list are fetched from a MySQL database. These 4 dropdown boxes are:

1)Car Make
2)Car Model
3)Parts Category
4)Car Parts

Car Model entries will depend on the Car Make values, and the Car Parts entries will depend on the Parts Category. Say... If i select BMW as the Car make, it will update the Car Model dropdown box with BMW car models. Same thing applies to the Parts Category, say.. if I select Body Parts in the Parts Category, it will update the Car Parts dropdown box with body parts.

On every change or display update, they should be able to preserve the selected values on other dropdown boxes.

Once satisfied with the selections, the form will now be submitted to a second script for further processing.

If possible, this script should be to ITSELF only and is NOT a multi page script.  

Please provide with a simple yet functional example of the code. Thank you very much and any help or thoughts are highly appreciated.


nyerkyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KatixaCommented:
Hi,

I've done something similar before. I just used some JavaScript functions.

This is, when you click on "Car Make", you call a function on JavaScript that automatically sets the location of the document to itself, but you add some parameters.

pagename.php?make=xxx&model=xxx&cat=xxx&parts=xxx

You can do this just getting the values from the dropdown boxes. If my english is too hard to understand, just lets see some code example (it's ASP, but I guess you get it). Be aware if copy-pasting this, I just edited a bit... I just post it to use it at help, is not the solution:

______
function fCargar(combo) {
  var parameters = "&id=<%=Request.QueryString("id")%>"
  parameters += "&fecha=" + document.form1.Fecha.value
  parameters += "&tipo=" + document.form1.Tipo.options[document.form1.Tipo.selectedIndex].value
  parameters += "&tipotraba=" + document.form1.TipoTrabajo.options[document.form1.TipoTrabajo.selectedIndex].value
  parameters += "&estado=" + document.form1.Estado.options[document.form1.Estado.selectedIndex].value
  parameters += "&objeto=" + document.form1.Objeto.value
  parameters += "&latarea=" + document.form1.latarea.options[document.form1.latarea.selectedIndex].value
  if (document.form1.Tarea) parameters += "&tarea=" + document.form1.Tarea.options[document.form1.Tarea.selectedIndex].value
  parameters += "&hcom=" + document.form1.Hcom.value
  parameters += "&hfin=" + document.form1.Hfin.value

  if (combo.selectedIndex==0) {
    if (document.form1.CT) {
      if (document.form1.OT)
        window.location.href="linea.asp?ct=" + document.form1.CT.options[document.form1.CT.selectedIndex].value + "&ot=" + document.form1.OT.options[document.form1.OT.selectedIndex].value + parameters;
      else
        window.location.href="linea.asp?ct=" + document.form1.CT.options[document.form1.CT.selectedIndex].value + parameters;
    }
    else
      window.location.href="linea.asp?" + parameters.substring(1);
  }
  else {
    window.location.href="linea.asp?" + parameters.substring(1);
  }
}
________

If you check the "interesting" part, you will see that what I do is generate the string so I can then reload the page. In that PHP code you check the value of each parameter, and you then load each dropdown with the correcta value. Just add some "if this is the value, then write 'selected'" in the appropiate line, so the combo box gets the value selected.

If there is no make, you just don't process the others. You can add something like "Please select a make", and so on, depending on the value. When a make is selected, when the page gets reloaded, you select the Car Model table browsing only the models in that make. Now, when you click on this combo and select a value, you have to call a JavaScript function that generates again this string, so when the page gets reloaded you have the two combos with the selected values.

If there are more fields, you just pass all the values, like I do in the example above.


I hope you was able to understand this. If not, I will try to be more precise next time :)

Regards.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nyerkyAuthor Commented:

Hello katixa,

Thank you for your comment. Can you provide me with a working example in PHP? Also, is the javascript cross-compatible with other browsers?

Thanks!
0
vadriewynCommented:
mmmmm.. i'll write you the code for car make & car model.. juz changing a few things shld suffice for the parts category and car parts cuz they work the same way..

------------------------------------------------------------------------------------------------------------------

$sql = "SELECT <car make field> FROM <tablename>";  // this will giv you all the car makes
$result = $db->query($sql);  // assuming you hav another class file for database query
// if you dont, juz run the SQL statement with your usual mysql_query string and save the return
// to a variable called $result

echo "<form name='make' action='index.php?carmake=$carmake' method='post'>";
echo "<select name='carmake'>";
for ($a = 0; $a < mysql_num_rows($result); $a++) {
 $array = mysql_fetch_row($result);
 echo "<option name='$array[0]' value='$array[0]'>".$array[0]."</option>";
}
echo "</select>";
echo "</form>";
// above chunk shld giv you yur 1st dropdown box wif all the car makes in it..

// assuming you have regglobals set to true..
if ($carmake) {
 $sql = "SELECT <car model field> FROM <car model table> WHERE <car make field> = '$carmake'";
$result = $db->query($sql);

echo "<form name='model' action='index.php?carmodel=$carmodel' method='post'>";
echo "<select name='carmodel'>";
for ($a = 0; $a < mysql_num_rows($result); $a++) {
 $array = mysql_fetch_row($result);
 echo "<option name='$array[0]' value='$array[0]'>".$array[0]."</option>";
}
echo "</select>";
echo "</form>";
}

------------------------------------------------------------------------------------------------------------------

the above code shld generate your 2 dropdown boxes accordingly.. the car parts and parts category shld work the same way.. only thing you'd have to switch are the sql statements..

hope this helps..
0
vadriewynCommented:
oh btw i missed out somethin.. on each of the <select> you shld also add in the onchange method to submit the form.. e.g :

echo "<select name='carmodel' onchange='model.submit()'>"
// fyi it's onchange='<form name>.submit()'.. so whateva yur form is.. juz replace accordingly..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.