Solved

PHP/MySQL Dyanmic Dropdown boxes on a single page

Posted on 2003-12-09
6
455 Views
Last Modified: 2013-12-12
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
Comment
Question by:nyerky
  • 2
6 Comments
 
LVL 1

Accepted Solution

by:
Katixa earned 75 total points
ID: 9904806
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
 

Author Comment

by:nyerky
ID: 9907929

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
 

Assisted Solution

by:vadriewyn
vadriewyn earned 75 total points
ID: 10130129
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
 

Expert Comment

by:vadriewyn
ID: 10130276
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

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
This article discusses how to create an extensible mechanism for linked drop downs.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now