Display data by Select Menu with AJAX

I am beginner at AJAX. There are two Select Menus: Month & Year. The objective is to display data in the table AFTER selection of YEAR. Based upon selected values data should be displayed in the table.

Thanks a lot in advanced.

<!DOCTYPE html>
<?php
    $year=$_GET["year"];
    $month=$_GET["month"];

    $year = array(
        "2009"=>"2009",
        "2010"=>"2010",
        "2011"=>"2011",
        "2012"=>"2012",
        "2013"=>"2013",
        "2014"=>"2014",
        "2015"=>"2015"
    );

    $month = array(
        "Jan"=>"Jan",
        "Feb"=>"Feb",
        "March"=>"March",
        "April"=>"April",
        "May"=>"May",
        "June"=>"June",
        "July"=>"July",
        "August"=>"August",
        "Sept"=>"Sept",
        "Oct"=>"Oct",
        "Nov"=>"Nov",
        "Dec"=>"Dec"
    );

    $query = "select * from dashboard WHERE month(creation) = '".$month."' AND year(creation) = '".$year."' ";
    $result = mysql_query($query);

    while(mysql_fetch_array($result))
    { 
        echo "<tr>";
            echo "<td>" . $row['creation'] . "</td>";
            echo "<td>" . $row['username'] . "</td>";
            echo "<td>" . $row['lastname'] . "</td>";
        echo "</tr>";
    }                           
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <script>
            function showDashboard(year)
            {
                if (year=="")
                  {
                  document.getElementById("monthYear").innerHTML="";
                  return;
                  } 
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlhttp=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                    document.getElementById("monthYear").innerHTML=xmlhttp.responseText;
                    }
              }
            xmlhttp.open("GET","dashboard.php"+year,true);
            xmlhttp.send();
            }
            </script>
    </head>
<body>

                    <form name="dashboard" action="dashboard.php" method="POST" >
                        <div style="padding-top:30px; padding-left:20px; margin:15px;">
                            Month:&nbsp;&nbsp;
                            <select name="month" id="byMonth" onchange="showDashboard(this.value)" >
                              <option value="key" selected="selected"> Select Month </option>
                              <?php
                                foreach($month as $key => $value){
                                   echo '<option value="'.$key.'">'.$value.'</option>';
                               }
                              ?>
                            </select>
                            Year:
                            <select name="year" id="byYear" onchange="showDashboard(this.value)">
                              <option value="key" selected="selected"> Select Year </option>
                              <?php
                                foreach($year as $key => $value){
                                   echo '<option value="'.$key.'">'.$value.'</option>';
                               }
                              ?>
                            </select>

                        </div>
                    </form>
                    <div id="monthYear">Dashboard info will be listed here.</div>
                    <div class="TableDashboard" >
                        <table >
                            <tr>
                                <td>Date</td>
                                <td>username</td>
                                <td>lastname</td>
                            </tr>
                        </table>
                    </div>
    </body>
</html>

2

Contributors

4

Replies

2 Days

Discussion Span

2 Months Ago

Last Updated

35

Views

Question
Answered

PriteshP23

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

2 Months Ago

0

I am beginner at AJAX. There are two Select Menus: Month & Year. The objective is to display data in the table AFTER selection of YEAR.

I don't consider you as a beginner.

What error you have so far when you ran the code?

Is this the issue you are having from the other thread?

LastMitch

Industrious Poster

4,118 posts since Mar 2012

Reputation Points: 132

Solved Threads: 334

Skill Endorsements: 45

2 Months Ago

0

What error you have so far when you ran the code?

There is an issue for line 3 & 4.

Undefined index: month<br />
Undefined index: year<br />

Action should be performed AFTER selecting year value. It is not giving result as per selected item.

PriteshP23

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

2 Months Ago

0

In short i need to get the selected values in ajax and show data based on selected values in table.

Thanks a lot in adv.

PriteshP23

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

2 Months Ago

0

Finally, i solved it out. I made two files to get the data from database. It seems for AJAX, one may use two files instead of doing all stuff in single file.

//dashboard.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            function showDashboard(year)
            {
                try
                {
                    month = $('#byMonth :selected').val();  
                    year = $('#byYear :selected').val(); 

                    if (year=="")
                    {
                        document.getElementById("monthYear").innerHTML="";
                        return;
                    } 
                    if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                    }
                    else
                    {// code for IE6, IE5
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    xmlhttp.onreadystatechange=function()
                    {
                        if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                            alert(xmlhttp.responseText);
                            document.getElementById("tableContentID").innerHTML=xmlhttp.responseText;
                        }
                    }
                    xmlhttp.open("GET",URL,true); 
                    xmlhttp.send();
                }
                catch(err){
                alert(err.message);
                }
            }
            </script>

// ajax.php

    $SelectedMonth = $_GET['month'];   
    $SelectedYear = $_GET['year']; 
    $query = "";
    $result = mysql_query($query);  
    while($row=mysql_fetch_array($result))
    {       
        echo "<tbody>";
            echo "<tr>";
                echo "<td>" . $row['creation'] . "</td>";
                echo "<td>" . $row['username'] . "</td>";
                echo "<td>" . $row['lastname'] . "</td>";
            echo "</tr>";
        echo "</tbody>";
    }

PriteshP23

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

Question Answered as of 2 Months Ago by LastMitch

Display data by Select Menu with AJAX

This question has already been solved: Start a new discussion instead