Category Viewer PHP and MySQL

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
g19max1
Forum Newbie
Posts: 1
Joined: Sat Oct 09, 2010 3:03 pm

Category Viewer PHP and MySQL

Post by g19max1 »

Am looking to design a form that deals with items in specific category. Database is working and getting the PHP to set values is not an issue, however I am not sure how to display this form. The form will have one dropdown box that dynamically displays data in the DB. Ok, check thats done. But, when a category is selected, i want another dropdown box to appear on the page without requiring a refresh. This second box will display sub categories. What would i use to make the subcategory box appear when a specific category is selected out of the main box?
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Category Viewer PHP and MySQL

Post by mecha_godzilla »

As this effect is client-side, you'll need to use JavaScript. I've put together the following HTML/JavaScript if you want to try it - the functionality isn't quite correct because you'll need to hide the other contextual menus when you need to display the relevant one. You could also use document.write to generate the contextual menus as well. If you need all this to be done 'on the fly' (IE the sub-menus are populated from the DB) you'll need to look at using AJAX.

Code: Select all

<script language="JavaScript">
function toggle() {
	
var which_option_is_selected = my_form.first_menu.options[my_form.first_menu.selectedIndex].value;

var which_menu = 'hidden_' + which_option_is_selected;
	
var state = document.getElementById(which_menu).style.display;

if (state == 'block') {
    document.getElementById(which_menu).style.display = 'none';
} else {
    document.getElementById(which_menu).style.display = 'block';
}

}
</script>

</head>
<body>

<form name="my_form">

<select name="first_menu" onChange="toggle();">
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
</select>

<div id="hidden_1" style="width:200px; display: none">

<select name="second_menu">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

</div>

<div id="hidden_2" style="width:200px; display: none">

<select name="second_menu">
<option value="A">D</option>
<option value="B">E</option>
<option value="C">F</option>
</select>

</div>

<div id="hidden_3" style="width:200px; display: none">

<select name="second_menu">
<option value="A">G</option>
<option value="B">H</option>
<option value="C">I</option>
</select>

</div>

</form>
HTH,

Mecha Godzilla
Post Reply