generating drop down menus with PHP and MySQL

gec100 · September 18, 2012

hi all

i'm relatively unexperienced in using html, php mysql or java so excuse me if i ask stupid questions :shrug:

i can read most of the code fine but when writing syntax could be the problem.

i'd like to create drop down menus based on selection of the menu before. here is peace of code i've found on the web. works fine on firefox but not in IE or chrome.

here is the test: http://gec.servebeer.com/servis/gec/test.php

first drop down is showed and populated from mysql as it should but second drop down is not showing on IE or chrome.

here is the code:

<?php
//seeming that we are just submitting and refreshing to the one page we need to check if the post variable is set, and if so a couple of other variables are set
if(!isset($_POST['make'])) {
    $next_dropdown = 0;
}
else {
    //This variable when set reveals the next drop down menu
    $next_dropdown = 1;
    //this variable keeps the previous selection selected so you kno wat you are editing 
    $selected = $_POST['make'];
}
?>
<html>
<head>
</head>
<body
<!--I left the action blank to refresh itself-->
<form name="form" method="post" action="">
    <select name="make" style="background-color: #008000; color:#FFFFFF;">
        <option value="NULL">Select Make</option>
        <?php
        $con = mysql_connect("localhost", "root", "letmein");
        mysql_select_db("car", $con);
        $query = "SELECT makeID, car_make FROM make ORDER BY makeID ASC";
        $result = mysql_query($query);
        while($row = mysql_fetch_array($result, MYSQL_NUM))
        {?>
            <option value="<?php echo $row[0]; ?>" onClick="document.form.submit()" <?php if(isset($selected) && $row[0] == $selected) {echo "selected='selected'";} ?>><?php echo $row[1]; ?></option>\n";
        <?php }
        echo '</form>\n';
        //this is where the other form will appear if the previous form is submitted, ultimately you can keep these fields in the same form you just need to make a way to distinguish the updated form or even perhaps just dynamically change the name of the form and do a switch statement
        if($next_dropdown == 1) {?>
            <form name="form2" action="" method="post">
            <select name="engine">
            <option value="NULL">Select Engine</option>
            <?php
            $result2 = mysql_query("SELECT engineID, engine FROM engine ORDERBY engineID ASC");
            while($row2 = mysql_fetch_array($result2, MYSQL_NUM))
            { ?>
            <option value="<?php echo $row2[0]; ?>" onClick="document.form2.submit()"><?php echo $row2[1]; ?></option>
            <?php }?>
            </select>
            </form>
        <?php }
?>
</body>
</html>

any thoughts why this is not working on IE and chrome?

thx

cyberRobot · September 18, 2012

The first <select> tag doesn't appear to have been closed.

For what it's worth, I would recommend running the code through a validator like the following:

http://validator.w3.org/

gec100 · September 18, 2012

thx cyberRobot

i know for the first <select>. found it earlier and fixed that but the problem is still here. going through validator did not do much help.

cyberRobot · September 18, 2012

Did you try fixing the error mentioned by the validator?

Sorry, I am unable to validate this document because on line 15 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
The error was: utf8 "\xE8" does not map to Unicode

Another issue I noticed is the <body> tag isn't complete.

<body

gec100 · September 18, 2012

i've checked it and fixed all errors. problem is it checks only the first half of the document. second half is generated after action in the first half.

Christian F. · September 18, 2012

Validation Output: 1 Error
Line 13, Column 47: there is no attribute "onClick"

? <option value="1" onClick="document.form.submit()" >Zagreba?ka Ban?

✉

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Only error left, according to the validator. Though, that shouldn't cause what you're experiencing.

Make sure that the form is actually being submitted, and check with your browsers' developer tools to see if there are any JS errors. I suspect it'll work better if you just use this.submit () (or similar).

Psycho · September 18, 2012

Going in and out of PHP/HTML makes your code messy and difficult to debug. If you structure the code better these types of problems are easier to solve. Second, don't use an onclick in an option tag. Use an onchange for the select element. Because you don't have to "Click" an option to select it. You can use your keyboard to make a selection. If you only want the form to submit if a value other than the first option is selected, then have the onchange call a function that makes that determination. In fact, I would suggest you should always call a function instead of putting login into the trigger. Also, using MYSQL_NUM is kinda bad in my opinion. If you added a data abstraction layer you would have to potentially rewrite a lot of code. It could even expose sensitive information. Better to use the explicit field name in my opinion. Lastly, there is no "NULL" within HTML form values - use an empty string.

As for your original problem I see no error handling for the query. So, logically either the query is failing or it might not be returning any results. But, I can see that it would be failing due to this "ORDERBY".

I've cleaned up the code quite a bit, but have not tested it since I don't have your DB.

<?php

//Set selected make
$selectedMake = (isset($_POST['make'])) ? $_POST['make'] : false;

//Connect to DB
$con = mysql_connect("localhost", "root", "letmein");
mysql_select_db("car", $con);

//Create Make options
$query = "SELECT makeID, car_make FROM make ORDER BY makeID ASC";
$result = mysql_query($query) or die(mysql_error());
$makeOptions = '';
while($row = mysql_fetch_assoc($result))
{
    $selected = ($selectedMake === $row['engineID']) ? ' selected="selected"' : '';
    $makeOptions .= "<option value='{$row['makeID']}'{$selected}>{$row['car_make']}</option>\n"
}

//Create form for Engine selection (if make was selected)
$engineForm = '';
if($selectedMake !== false)
{
    $query = "SELECT engineID, engine FROM engine ORDER BY engineID ASC";
    $result = mysql_query($query) or die(mysql_error());

    $engineForm .= "<form name='form2' action='' method='post'>\n";
    $engineForm .= "<select name=\"engine\" onchange='if(this.selectedIndex!=0) {this.form.submit();};'>\n";
    $engineForm .= "<option value=''>Select Engine</option>\n";
    while($row = mysql_fetch_assoc($result))
    {
        $makeOptions .= "<option value='{$row['engineID']}' {$selected}>{$row['engine']}</option>\n"
    }
    $engineForm .= "</select>\n";
    $engineForm .= "</form>\n";
}

?>
<html>
<head>
</head>
<body
<!--I left the action blank to refresh itself-->
<form name="form" method="post" action="">
    <select name="make" style="background-color: #008000; color:#FFFFFF;" onchange="if(this.selectedIndex!=0) {this.form.submit();};">
        <option value="">Select Make</option>
        <?php echo $makeOptions; ?>
    </select>
</form>

<?php echo $engineForm; ?>

</body>
</html>

Edit: Updated onchange event to only trigger when NOT the first option is selected. But, I still think you shoudl call a function - I was just too lazy to do so.

cyberRobot · September 18, 2012

If you're changing how the form submits, may I suggest switching to a regular submit button since it doesn't depend on JavaScript.

If you decide to use onchange, be aware that it won't work if the option is already selected. For example, let's say someone selects "FINA" from the drop down and the form submits. If they hit the back button and "FINA" is still selected, they won't be able to select "FINA" again unless they choose another option...or refresh the page.

Note that you could also consider using JavaScript to show and populate the second menu.

gec100 · September 18, 2012

thx guys for your answers.

most of it is still SciFi for me but i'll get on it tonight and post what i've learned and if i manage to fix the problem.

gec

Sign In

generating drop down menus with PHP and MySQL

Recommended Posts

gec100

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

gec100

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

gec100

Link to comment

Share on other sites

Christian F.

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

gec100

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information