[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 471
  • Last Modified:

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.


0
nyerky
Asked:
nyerky
  • 2
2 Solutions
 
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
 
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now