Using PHP and Ajax to show ORDERS by Year without refreshing page

[JunWei]

Hi all,

Here is a brief description of what I want to do (please see attached image):

https://ibb.co/QpmvZ60

1) User click "View"
2) User select "Year"
3) Show all records of that "Year"

I have 2 php files:

A) order_view.php

This php shows up to step 2.

B) order_view_ByYear.php

At step 3 after user clicks "Select Year", use ajax to display the records at the bottom.

-------------------------

A) order_view.php
 

<script type="text/javascript">
function submitYear(sno)
{
    var cusid=sno;
    var yearSelDD=document.getElementById("selectYear");
    var yearSel = yearSelDD.options[yearSelDD.selectedIndex].value;
    alert("cusid = " + cusid + " yearSel = " + yearSel);
    $.ajax({
            type:'POST',
            url:'order_view_ByYear.php',
            data:{
                cusid:cusid,
                yearSel:yearSel,
                wrapper:"testing"
            },
            //If successful, which part of webpage to change?
            success: function(result)
            {
                $('#showOrders').html(result);
            }  
    });    
}
</script>

...
Some Codes
...

//==============================  Display that User's Orders using ajax ==============================  
    $sql2 = $mysqli->query("select * from orders where customerid='$cusid' ORDER BY orderid DESC");
    if ($sql2->num_rows > 0) {
        while ($row2 = $sql2->fetch_assoc()) {
            
            // Populate the YearArray() DropDownList
            $rowYear = date('Y', strtotime($row2["date"]));
            if($YearToAdd != $rowYear)
            {
                $YearToAdd = $rowYear;
                array_push($YearArray, $YearToAdd);
            }
        }
    }
?>
            <table><tr><td>
            <form method="post">
                <select>
                    <?php

                    // Iterating through the YearArray()
                    foreach($YearArray as $item){
                        echo "<option value='$item'>$item</option>";
                    }
                    ?>
                </select>
                <input type="button" value="Select Year" id="selectYear" class="send" onClick="javascript:submitYear($cusid)"/>


            </form>
            </td></tr></table>
            <br/>
<?php
    echo "<div id=\"showOrders\">Select Year</div>";

...
Some Codes
...

 

B) order_view_ByYear.php

<?php
error_reporting(0);
include "../database_connection.php";
$cusid    = $_POST['cusid'];
$YrSelect  = $_POST['yearSel'];

//Testing
echo "CustID = ". $cusid . " Year = " . $YrSelect;

...

However nothing happened when I click the "Select Year" button. No alert, nothing.

Can someone guide me where I did wrongly in the code?

Much Appreciated.

 

 

[dodgeitorelse3]

onClick="javascript:submitYear($cusid)"/>

this is not inside php tags so $cusid has no value

[JunWei]

3 hours ago, dodgeitorelse3 said:

onClick="javascript:submitYear($cusid)"/>

this is not inside php tags so $cusid has no value

Is this the right way? Haha, still not working 😭

...

?>
            <table><tr><td>
            <form method="post">
                <select>
                    <?php

                    // Iterating through the YearArray()
                    foreach($YearArray as $item){
                        echo "<option value='$item'>$item</option>";
                    }
                    ?>
                </select>

                 <?php
                    echo "<input type=\"button\" value=\"Select Year\" id=\"selectYear\" class=\"send\" onClick=\"javascript:submitYear($cusid)\"/>"
                ?>

            </form>
            </td></tr></table>
            <br/>
<?php

...

 

[mac_gyver]

you are getting a fatal error in the browser. you need to use your browser's develop tools console tab to debug what is going on in the browser.

the element you have given id="selectYear" to, is the button, not the select menu.

as to the $cusid. this is already known on the server when the main page was requested. why are you passing it through the form? external data submitted to your site must always be validated before using it. if you use the already validated value that you already know on the server, you can simplify the code.

 

[JunWei]

22 minutes ago, mac_gyver said:

you are getting a fatal error in the browser. you need to use your browser's develop tools console tab to debug what is going on in the browser.

the element you have given id="selectYear" to, is the button, not the select menu.

as to the $cusid. this is already known on the server when the main page was requested. why are you passing it through the form? external data submitted to your site must always be validated before using it. if you use the already validated value that you already know on the server, you can simplify the code.

 

After reading your reply, and looking at the console, I finally understood what you mean.

You are right. I was getting the id from Button. I needed to get from the Select Menu.

<select id="selectYearDD">

 

function submitYear(sno)
{
    var cusid=sno;
    var yearSelDD=document.getElementById("selectYearDD");
    var yearSel = yearSelDD.options[yearSelDD.selectedIndex].value;

Tyvm