Display information results from my multi drop down menus

adandy · April 12, 2014

Hello,

first I would like to note that I found this-- http://forums.phpfreaks.com/topic/187247-display-results-upon-drop-down-selection-phpmysql/?hl=%2Bdisplay+%2Bresults+%2Bfrom+%2Bdrop+%2Bdown+%2Bmenu&do=findComment&comment=988883 --post very similar to my question but I just could not figure it out. It wouldn't work with my type of code or maybe I simply missed something.

Alright, well basicly I have a drop down menu working now all I want to do is to display the description(for now) in the section to the right of my drop down menus. In my database the column is call "description" and it is in my destination table. Here is my code that I have so far...

The Javascript

<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#flip").click(function() {
                jQuery("#panel").slideToggle("slow");
            });

            jQuery(".wrap").on('change', '#country',function() {

                var querystr = 'countryid='+jQuery('#country :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr, function(data){
                    if(data.errorcode == 0){
                        jQuery('#statecbo').html(data.chtml)

                    }else{
                        jQuery('#statecbo').html(data.chtml)
                    }
                }, "json");
            });
            jQuery(".wrap").on('change', '#states', function() {
                var querystr1 = 'stateid=' +jQuery('#states :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr1, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#citycbo').html(data.chtml)
                    }else{
                        jQuery('#citycbo').html(data.chtml)
                    }
                }, "json");
            });

            jQuery(".wrap").on('change', '#city', function() {
                var querystr2 = 'cityid=' +jQuery('#city :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo').html(data.chtml)
                    }else{
                        jQuery('#descbo').html(data.chtml)
                    }
                }, "json");
            });
        });



    </script>

<html>
        <head>
            <title>Dynamic Drop Down Menu</title>

        </head>
        <body>
            <div class="wrap">
            <h2> Country</h2>
             <select id="country" name="country" required>
                 <option value="">--Select Country--</option>
                <?php
                $sql=mysql_query("SELECT * from country order by name");
                while ($row=mysql_fetch_array($sql)) {
                    $countryID=$row['IDCountry'];
                    $countryname=$row['name'];
                    echo "<option value='$countryID'>$countryname</option>";
                 }
                 ?>
           </select>
        </div>
            <h2>State</h2>
            <div class="wrap"  id="statecbo">



            </div>
            <h2>City</h2>
            <div class="wrap" id="citycbo">


        </div>

            <h2>Destination</h2>
            <div class="wrap" id="descbo">
            </div>

and here is my ajax.php file

$country_id = isset($_POST['countryid']) ? $_POST['countryid'] : 0;
if ($country_id <> 0) {
    $errorcode = 0;
    $strmsg = "";
    $sql="SELECT * from state WHERE IDCountry = ". $country_id . " ORDER BY name;";
    $result=mysql_query($sql);
    $cont=mysql_num_rows($result);
    if(mysql_num_rows($result)){
        $chtml = '<select name="states" id="states"><option value="0">--Select State--</option>';
        while($row = mysql_fetch_array($result)){
            $chtml .= '<option value="'.$row['IDState'].'">'.$row['name'].'</option>';
        }
        $chtml .= '</select>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
    }else{
        $errorcode = 1;
        $strmsg = '<font style="color:#F00;">No States available</font>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
    }


}

$state_id = isset($_POST['stateid']) ? $_POST['stateid'] : 0;
if ($state_id <> 0) {
    $errorcodeC = 0;
    $strmsg = "";
    $sqlC="SELECT * from city WHERE IDState = ". $state_id . " ORDER BY name;";
    $resultC=mysql_query($sqlC);
    $contC=mysql_num_rows($resultC);
    if(mysql_num_rows($resultC)){
        $chtmlC = '<select name="city" id="city"><option value="0">--Select city--</option>';
        while($row = mysql_fetch_array($resultC)){
            $chtmlC .= '<option value="'.$row['IDCity'].'">'.$row['name'].'</option>';
        }
        $chtmlC .= '</select>';
        echo json_encode(array("errorcode"=>$errorcodeC,"chtml"=>$chtmlC));
    }else{
        $errorcodeC = 1;
        $strmsg = '<font style="color:#F00;">No city available</font>';
        echo json_encode(array("errorcode"=>$errorcodeC,"chtml"=>$strmsg));
    }


}

$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
    $errorcodeD = 0;
    $strmsg = "";
    $sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
    $resultD=mysql_query($sqlD);
    $contD=mysql_num_rows($resultD);
    if(mysql_num_rows($resultD)){
        $chtmlD = '<select name="destination" id="destination"><option value="0">--Select Destination--</option>';
        while($row = mysql_fetch_array($resultD)){
            $chtmlD .= '<option value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
        }
        $chtmlD .= '</select>';
        echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
    }else{
        $errorcodeD = 1;
        $strmsg = '<font style="color:#F00;">No Destination available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
    }


}

Any help would be greatly appreciated. I am also about two weeks into learning how to program so basic explanations would help me learn alot!

Thank you!

jazzman1 · April 12, 2014

Where are '#states' and '#city' ids in your html, I see only '#country'.

Can I see the output of this data,

jQuery(".wrap").on('change', '#country',function() {

                var querystr = 'countryid='+jQuery('#country :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr, function(data){
                    if(data.errorcode == 0){
                       console.log(data); // here
                        jQuery('#statecbo').html(data.chtml)

                    }else{
                        jQuery('#statecbo').html(data.chtml)
                    }
                }, "json");

I'm using a console log in firefox to debug my js scripts.

adandy · April 14, 2014

My code works fine. I am just trying to figure out how can I display the results in a box that the user can edit.

jazzman1 · April 14, 2014

Moved to Ajax section!

Where is the output that I wanted to see?

adandy · April 14, 2014

Alright, My output would be in my html section where

<h2>State</h2>
<div class="wrap"  id="statecbo"></div>

The id "statecbo" is what is calling from the #country function.

And this is my ajax.php file that is supplying the array for the #country function

$country_id = isset($_POST['countryid']) ? $_POST['countryid'] : 0;
if ($country_id <> 0) {
    $errorcode = 0;
    $strmsg = "";
    $sql="SELECT * from state WHERE IDCountry = ". $country_id . " ORDER BY name;";
    $result=mysql_query($sql);
    $cont=mysql_num_rows($result);
    if(mysql_num_rows($result)){
        $chtml = '<select name="states" id="states"><option value="0">--Select State--</option>';
        while($row = mysql_fetch_array($result)){
            $chtml .= '<option value="'.$row['IDState'].'">'.$row['name'].'</option>';
        }
        $chtml .= '</select>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
    }else{
        $errorcode = 1;
        $strmsg = '<font style="color:#F00;">No States available</font>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
    }


}

Sorry If this is not correct or if its confusing. I am a beginner and Im learning as I go! hope this helps

jazzman1 · April 14, 2014

Which javascript debugging tool are you using? Do you have firefox installed in your OS?

adandy · April 14, 2014

I am writing all my code in PHPStorm, and yes I have it installed but I use Chrome.

jazzman1 · April 14, 2014

I don't use any of them, sorry. Under firefox you could install the add-on named firebug to debug your js/dom content and to assist you effectively.

adandy · April 16, 2014

I figured it out. Just in-case anyone ever stumbles upon this question with a similar question here is my solution.

<?php


// adds plugin file to settings menu
add_action('admin_menu', 'DestinationsDropDownMenu_admin_actions');

function DestinationsDropDownMenu_admin_actions() {
    add_options_page('DestinationsDropDownMenu', 'DestinationsDropDownMenu', 'manage_options', _FILE_, 'DestinationsDropDownMenu_admin');
}

function DestinationsDropDownMenu_admin() {



    ?>


<!-- Java -->
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#flip").click(function() {
                jQuery("#panel").slideToggle("slow");
            });

            //grabs from ajax.php for state drop down
            jQuery(".wrap").on('change', '#country',function() {
                var querystr = 'countryid='+jQuery('#country :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr, function(data){
                    if(data.errorcode == 0){
                        jQuery('#statecbo').html(data.chtml)

                    }else{
                        jQuery('#statecbo').html(data.chtml)
                    }
                }, "json");
            });

            //grabs from ajax.php for city drop down
            jQuery(".wrap").on('change', '#states', function() {
                var querystr1 = 'stateid=' +jQuery('#states :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr1, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#citycbo').html(data.chtml)
                    }else{
                        jQuery('#citycbo').html(data.chtml)
                    }
                }, "json");
            });

            //grabs from ajax.php for destination drop down
            jQuery(".wrap").on('change', '#city', function() {
                var querystr2 = 'cityid=' +jQuery('#city :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo').html(data.chtml)
                    }else{
                        jQuery('#descbo').html(data.chtml)
                    }
                }, "json");
            });

            //grabs from ajax.php and generates description for that specific destination
            jQuery(".wrap").on('change', '#destination', function() {
                var data = 'destinationid=' +jQuery('#destination :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", data, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo1').html(data.chtml);

                    }else{
                        jQuery('#descbo1').html(data.chtml);

                    }

                }, "json");

            })

            //grabs from ajax.php and generates page_title info for that specific destination
            jQuery(".wrap").on('change', '#destination', function() {
                var data = 'destinationid2=' +jQuery('#destination :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", data, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo2').html(data.chtml);

                    }else{
                        jQuery('#descbo2').html(data.chtml);

                    }

                }, "json");

            })

            //grabs from ajax.php and generates page_tags(meta keywords) info for that specific destination
            jQuery(".wrap").on('change', '#destination', function() {
                var data = 'destinationid3=' +jQuery('#destination :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", data, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo3').html(data.chtml);

                    }else{
                        jQuery('#descbo3').html(data.chtml);

                    }

                }, "json");

            })




            jQuery(".wrap").on('change', '#destination', function() {
                var data = 'destinationid4=' +jQuery('#destination :selected').val();
                jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", data, function(data) {
                    if(data.errorcode ==0){
                        jQuery('#descbo4').html(data.chtml);

                    }else{
                        jQuery('#descbo4').html(data.chtml);

                    }

                }, "json");

            })







        });
     </script>

    <html>
        <head>
            <title>Dynamic Drop Down Menu</title>
        </head>


        <body>

            <!-- Country drop down -->
            <div class="wrap">
            <h2> Country</h2>
             <select id="country" name="country" required>
                 <option value="">--Select Country--</option>
                <?php
                $sql=mysql_query("SELECT * from country order by name");
                while ($row=mysql_fetch_array($sql)) {
                    $countryID=$row['IDCountry'];
                    $countryname=$row['name'];
                    echo "<option value='$countryID'>$countryname</option>";
                 }
                 ?>
             </select>
            </div>

            <!-- State Drop Down -->
            <h2>State</h2>
            <div class="wrap"  id="statecbo">
            </div>

            <!-- City Drop Down -->
            <h2>City</h2>
            <div class="wrap" id="citycbo">
             </div>

            <!-- Destination Drop Down -->
            <h2>Destination</h2>
            <div class="wrap" id="descbo">
            </div>

            <!-- General information Table Starts right herrrr -->
            <table cellpadding="5" cellspacing="2" border="0">



            <h1 align="center">General Information</h1>

               <?php
                echo "<form action=Destinations_Drop_Down_Menu.php method=post>"
                ?>

                <tr>
            <td>description:</td>
            <td><div class="wrap" id="descbo1"></div></td>
                </tr>


                <tr>
                    <td>page title:</td>
                    <td><div class="wrap" id="descbo2"></div></td>
                </tr>

                <tr>
                    <td>Meta Keywords:</td>
                    <td><div class="wrap" id="descbo3"></div></td>
                </tr>

                <tr>
                <td>Meta Description:</td>
                <td><div class="wrap" id="descbo4"></div></td>
                </tr>


               
        </table>







        </body>
    </html>

    </body>


</html>

<?php


}
?>

and my ajax.php file...

<?php

//grabs info from database for the state dropdown
$country_id = isset($_POST['countryid']) ? $_POST['countryid'] : 0;
if ($country_id <> 0) {
    $errorcode = 0;
    $strmsg = "";
    $sql="SELECT * from state WHERE IDCountry = ". $country_id . " ORDER BY name;";
    $result=mysql_query($sql);
    $cont=mysql_num_rows($result);
    if(mysql_num_rows($result)){
        $chtml = '<select name="states" id="states"><option value="0">--Select State--</option>';
        while($row = mysql_fetch_array($result)){
            $chtml .= '<option value="'.$row['IDState'].'">'.$row['name'].'</option>';
        }
        $chtml .= '</select>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
    }else{
        $errorcode = 1;
        $strmsg = '<font style="color:#F00;">No States available</font>';
        echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
    }


}

//grabs info from database for the city dropdown
$state_id = isset($_POST['stateid']) ? $_POST['stateid'] : 0;
if ($state_id <> 0) {
    $errorcodeC = 0;
    $strmsg = "";
    $sqlC="SELECT * from city WHERE IDState = ". $state_id . " ORDER BY name;";
    $resultC=mysql_query($sqlC);
    $contC=mysql_num_rows($resultC);
    if(mysql_num_rows($resultC)){
        $chtmlC = '<select name="city" id="city"><option value="0">--Select city--</option>';
        while($row = mysql_fetch_array($resultC)){
            $chtmlC .= '<option value="'.$row['IDCity'].'">'.$row['name'].'</option>';
        }
        $chtmlC .= '</select>';
        echo json_encode(array("errorcode"=>$errorcodeC,"chtml"=>$chtmlC));
    }else{
        $errorcodeC = 1;
        $strmsg = '<font style="color:#F00;">No city available</font>';
        echo json_encode(array("errorcode"=>$errorcodeC,"chtml"=>$strmsg));
    }


}

//grabs info from database for the destination drop down
$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
    $errorcodeD = 0;
    $strmsg = "";
    $sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
    $resultD=mysql_query($sqlD);
    $contD=mysql_num_rows($resultD);
    if(mysql_num_rows($resultD)){
        $chtmlD = '<select name="destination" id="destination"><option value="0">--Select Destination--</option>';
        while($row = mysql_fetch_array($resultD)){
            $chtmlD .= '<option value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
        }
        $chtmlD .= '</select>';
        echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
    }else{
        $errorcodeD = 1;
        $strmsg = '<font style="color:#F00;">No Destination available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
    }


}
// Gets the description info from the last destination select drop down menu
$destination_id = isset($_POST['destinationid']) ? $_POST['destinationid'] : 0;
if ($destination_id <> 0) {
    $errorcoded1 = 0;
    $strmsg = "";
    $sqlD1="SELECT * from destination WHERE IDDestination= ". $destination_id . " ORDER BY name;";
    $resultD1=mysql_query($sqlD1);
    $contD1=mysql_num_rows($resultD1);
    if(mysql_num_rows($resultD1)){
    $chtmlD1 = '<div name="description" id="description">';

    while($row = mysql_fetch_array($resultD1)){
        $chtmlD1 .= '<textarea name="Description" cols="130" rows="10">' . $row['description'] . '</textarea>';

    }
    $chtmlD1 .= '</div>';

    echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$chtmlD1));
} else {
        $errorcodeD1 = 1;
        $strmsg = '<font style="color:#F00;">No Description available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$strmsg));
}

}


// Gets the page_title info from the last destination select drop down menu

$destination_id = isset($_POST['destinationid2']) ? $_POST['destinationid2'] : 0;
if ($destination_id <> 0) {
    $errorcoded1 = 0;
    $strmsg = "";
    $sqlD1="SELECT * from destination WHERE IDDestination= ". $destination_id . " ORDER BY name;";
    $resultD1=mysql_query($sqlD1);
    $contD1=mysql_num_rows($resultD1);
    if(mysql_num_rows($resultD1)){
        $chtmlD1 = '<div name="pagetitle" id="pagetitle">';

        while($row = mysql_fetch_array($resultD1)){
            $chtmlD1 .= '<textarea name="page_title" cols="100" rows="2" >' . $row['page_title'] . '</textarea>';

        }
        $chtmlD1 .= '</div>';

        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$chtmlD1));
    } else {
        $errorcodeD1 = 1;
        $strmsg = '<font style="color:#F00;">No Description available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$strmsg));
    }

}

// gets the page_tags(meta keywords for that destination
$destination_id = isset($_POST['destinationid3']) ? $_POST['destinationid3'] : 0;
if ($destination_id <> 0) {
    $errorcoded1 = 0;
    $strmsg = "";
    $sqlD1="SELECT * from destination WHERE IDDestination= ". $destination_id . " ORDER BY name;";
    $resultD1=mysql_query($sqlD1);
    $contD1=mysql_num_rows($resultD1);
    if(mysql_num_rows($resultD1)){
        $chtmlD1 = '<div name="pagetags" id="pagetags">';

        while($row = mysql_fetch_array($resultD1)){
            $chtmlD1 .= '<textarea name="page_title" cols="110" rows="4" >' . $row['page_tags'] . '</textarea>';

        }
        $chtmlD1 .= '</div>';

        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$chtmlD1));
    } else {
        $errorcodeD1 = 1;

       $strmsg = '<font style="color:#F00;">No meta keywords available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$strmsg));
    }

}


$destination_id = isset($_POST['destinationid4']) ? $_POST['destinationid4'] : 0;
if ($destination_id <> 0) {
    $errorcoded1 = 0;
    $strmsg = "";
    $sqlD1="SELECT * from destination WHERE IDDestination= ". $destination_id . " ORDER BY name;";
    $resultD1=mysql_query($sqlD1);
    $contD1=mysql_num_rows($resultD1);
    if(mysql_num_rows($resultD1)){
        $chtmlD1 = '<div name="pagedescription" id="pagedescription">';

        while($row = mysql_fetch_array($resultD1)){
            $chtmlD1 .= '<textarea name="page_title" cols="110" rows="4" >' . $row['page_description_tag'] . '</textarea>';

        }
        $chtmlD1 .= '</div>';

        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$chtmlD1));
    } else {
        $errorcodeD1 = 1;

        $strmsg = '<font style="color:#F00;">No meta keywords available</font>';
        echo json_encode(array("errorcode"=>$errorcodeD1,"chtml"=>$strmsg));
    }

}

?>

Now my next question is that when all the description values get displayed, they will be constantly edited and I want it to be saved back to the database via A SUBMIT button.

I have tried several examples with the form method but I just cant get them to work.

Any advice or is it because of the way I used my ajax.php style?

jazzman1 · April 17, 2014

First check if the form is submitted, second if the values of the form elements are correct,third send the values in the database. To do this you need to have some javascript debugging tool.

Sign In

Display information results from my multi drop down menus

Recommended Posts

adandy

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

adandy

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

adandy

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

adandy

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

adandy

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information