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>  

Recommended Answers

All 4 Replies

Member Avatar for LastMitch

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?

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.

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.

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>";
    }                           
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.