CODEWITHSUNDEEP
phpjavascriptmysqlhtml
DextrousDave
DextrousDave

Reputation: 6793

Selected Dropdownlist item - Call/Fetch data

I have a dropdown list on a web form containing dates. My Question: How can I call data for that selected item(date) from a MySQL database and display it to the user? And more specifically, if that selected date has no data in the data base, I want to be able to display that as well. I'm looking for a Javascript solution, and if possible a php solution(preferred).

Thank You!

Upvotes: 0

Views: 1402

Answers (3)

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6124

Edit: These samples use PHP and CSS

The first step is to open a connection with the MySQL database. You will need some info from your hosting provider for this to work, but usually, it looks something like this:

<?php

    $connection = mysql_connect("", "root@localhost", "")
    or die("Couldn't connect: ".mysql_error());

    mysql_select_db("SOME_TABLE", $connection)
    or die( "Unable to select database");

Next, you'll retrieve the date data from whatever table you're using. You can use php's mysql_fetch_array function to select all the table info from the earlier select statement. The returned value equals a $row array with columns as indexes.

    $res = mysql_query("SELECT DATE FROM SOME_TABLE");

?>

The next step is to generate the drop down divs. I'm not completely sure how to check if a table is empty, but I think I got it right in the code below:

<!DOCTYPE html>
<html>
    <head>
        <title>Drop down!</title>
    </head>
    <body>

    <?php 

        $row = mysql_fetch_array($res,MYSQL_NUM);
        if($row == null) { //This I'm not positive about

    ?>

        <div class="dropdown">NUTHIN</div>

    <?php

             } else {

             while($row=mysql_fetch_array($res,MYSQL_NUM)){ ?>


    <div class="dropdown">
        <?php echo $row[0] ?>
    </div>

<?php } } ?>

    </body>
</html>

After you get all of this working, getting a drop-down menu to function is a cinch. In fact, it can be done purely with CSS. Here's an example:

<head>
<style>
#menu_group {
    position:relative;
    width:200px;
    background-color:#F00;
}
.menu_item {
    display:none;
    background-color:#FF0;

}

#menu_group:hover > .menu_item {
    display:block;
}
</style>

</head>
<body>

<div id="menu_group">Something
    <div class="menu_item">1</div>
    <div class="menu_item">2</div>
    <div class="menu_item">3</div>
</div>
</body>

Here's how it works: if the user hovers over an element with an id of menu_group, all child elements with a class name of menu_item will change their display property from none (ala invisible) to block (visible block-level element).

Hope that all helped. I have no guarantees that this code will work flawlessly, except the CSS drop-down anyway.

Upvotes: 1

Har
Har

Reputation: 5004

create a table with an id field, datetime and other relevant information. on the change event in javascript use an ajax call to your database (by DateTime) and render it onto your page

Upvotes: 0

CFL_Jeff
CFL_Jeff

Reputation: 2719

If you don't want to have to refresh the page, you could use AJAX to make an asynchronous call to another PHP page, passing the selected date as a url parameter. This other PHP page could run the query on the database and return whatever values you need so your page is updated with the results of the query.

I recommend using jQuery's AJAX capabilities. Here's a good example.

Upvotes: 1

Related Questions