Jump to content

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


JunWei
Go to solution Solved by mac_gyver,

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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

...

 

Link to comment
Share on other sites

  • Solution

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.