Display data by Select Menu with AJAX

Question

PriteshP23 0 Posting Whiz in Training

11 Years Ago

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>

javascript

Edited 11 Years Ago by PriteshP23 because: code

2 Contributors
4 Replies
593 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by PriteshP23

LastMitch

11 Years Ago

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?

Reply to this topic

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.

PriteshP23 0 Posting Whiz in Training · Answer 1 · 2013-02-27T08:55:26+00:00

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 0 Posting Whiz in Training · Answer 2 · 2013-02-27T10:15:54+00:00

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 0 Posting Whiz in Training · Answer 3 · 2013-03-01T09:47:57+00:00

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>";
    }