Page 1 of 1

Category Viewer PHP and MySQL

Posted: Sat Oct 09, 2010 3:11 pm
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?

Re: Category Viewer PHP and MySQL

Posted: Fri Oct 15, 2010 8:07 pm
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