Forum Moderators: coopster
i am trying to learn php on my own and i have an issue with the drop down box in php. i would like to use 3 drop down boxes one for the state, second for the district and the third for the pincode.
when the page loads for the first time then only one drop down should be present and when the user selects any state then one more should appear automatically with the list of districts in that state and when the user selects the district then one more drop down should appear with the different pincodes available for that district.
like this it should be done automatically and should be visible only one after the other and the values should remain same in the drop down boxes.
if you do not understand this then you can imagine the selection of the category and sub category in any forum or journals.
so can any one guide me the process how can that be done.
javascript does stuff to the page once it's loaded. php works at the server end, working out what content to display.
you'll need javascript to do this, rather than php.
Need would make it Javascript dependent which is bad, however, you can/should use JS to enhance this.
The following logic will get you started. Your script should look something like this. I will use the variables $cat and $subcat, assuming you have filtered the input data and stored the cleansed values in those variables.
// first, if both $cat and $subcat are present, output your results:
if ((isset($cat) and ($cat > 0)) and (isset($subcat) and ($subcat > 0))) {
$results = '';
// select * from datatable where category_id='$cat' and subcat_id='$subcat' order by title_field
if ($results == '') {
echo "No results found, please select a category and subcategory below.";
}
else { echo " your results here."; }
}
Note that someone could select a cat, then select a subcat, then RE-SELECT a new category. This might submit a request for a subcategory that does not exist in the main category - so your results above would be BLANK. This would be "okay" because of what we do below, except you might want to output some sort of message, as above in $results.
In the interest of usability, it would be pretty efficient to just always output the search form below the results. That way it's always right there, no navigating back to a "search page." So ... close the above "if" and move on to the form.
echo "<form action=\"yourscript.php\" onSubmit=\"return checkFormSubmit(this.form);\">\n";
echo "<label for=\"category\">Category:</label>\n";
echo "<select name=\"category\" id=\"category\" onChange=\"submitNewCat(this,this.form);\">\n";
echo "<option value=\"\">Select</option>\n";
// open database table, print main category options . . .
// select rec_id,title from categories order by title
echo "</select>\n";
// So at this point all you have is a category list, but IF the category
// has been selected and submitted, you can output the subcategory list.
if (isset($cat) and ($cat > 0)) {
echo "<label for=\"subcategory\">Subcategory:</label>\n";
echo "<select name=\"subcategory\" id=\"subcategory\" onChange=\"checkFormSubmit(this.form);">
<option value=\"\">Select</option>\n";
// open database table, print sub category options . . .
// select rec_id,title from subcategories where category_id='$cat' order by title
echo "</select>\n";
}
echo "<input type=\"submit\" value=\"Search\">\n";
echo "</form>";
The Javascript
submitNewCat just checks that the main category is selected. Note that this will always resubmit the form, and get a new sub category if someone changes to a new category, even if the subcategory is already on the page (with the exception noted above.)
function submitNewCat(selObj,form) {
if (selObj.selectedIndex > 0) { form.submit(); }
else { alert('Select a main category.'); }
}
This is why you should always output the first option with a blank value; if JS is disabled, the receiving script won't have a value for the select (it won't be > 0) and your script can manage this accordingly.
checkFormSubmit is on both the subcat and the form submit action and checks that both select lists, if present, are selected. Note that if Javascript is disabled, this will still work - which is why you need the submit button. (Caveat: with JS enabled, you could put the submit button in an element and set the innerHTML of the element to '' on load . . . but not necessary. Submit buttons are reassuring.)
function checkFormSubmit(form) {
var msg = '';
// Checking for document.getElementById makes browser identification
// obsolete, just test for what we need
if (document.getElementById) {
// This will always be present
if (! (document.getElementById('category').selectedIndex > 0)) {
msg = 'Please select a main category.';
}
// But this may not be present, so first test for it
if (document.getElementById('subcategory')) {
if (! (document.getElementById('subcategory').selectedIndex > 0)) {
msg += 'Please select a sub category.';
}
}
// If message is blank, we're good. Note this will have
// both error messages if both are blank (which is really
// impossible, but anyway . . .
if (msg == '') { form.submit(); }
else { alert(msg); }
}
// Always return false. This prevents double-submits in the event
// the submit button gets pushed.
return false;
}
So overall,
- If Javascript is enabled, it manages the submits automatically.
- If Javascript is DISabled, your script manages the lists based on what's input so it will still work. If both $cat and $subcat are present, you output results; if nothing is present, just the category list; if the category list is present, you output both.
- The logic seems "backwards" because it's checking for output results first, but this page would always have the search form right on it, making it much easier to use than "back to search".
