1,105,578 Community Members

Display data by Select Menu with AJAX

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
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. 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>  
LastMitch
Deleted Member
 
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?

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
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.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
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.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
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>";
    }                           
Question Answered as of 1 Year Ago by LastMitch
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: