hcienfue
hcienfue

Reputation: 1

Passing data between two aspx pages using javascript

I need help with passing around data between two aspx pages (these aspx pages are stored in SharePoint Designer). I have created some JavaScript that does some simple calculations for metrics on our site.

https://tandemhospitalpartners.sharepoint.com/SitePages/Home.aspx

The following JavaScript is in the aspx link listed above.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">
        window.onload = function () 
        {

        }
        
        function p1()
        {

            totalPts = 137;
            setTotalPts(totalPts);
            
            
            divId = document.getElementById('avg'); // element represents the ID 'countdown' for the div

            today = new Date(); //this represents todays date in the following format
            //Weekday ex. "Tue"
            //Month ex. "Aug"
            //Todays Date ex. "08"
            //Year ex. "2017"
            //Time ex. "13:44:54 GMT - 0500 (Central Daylight Time"


            svOpen = new Date(2017, 06, 17); // this represents the first day we accepted patients
            

            one_day = 1000 * 60 * 60 * 24; 
            //milliseconds
            //minutes
            //seconds
            //hours


            //We have been open for 23 days


            daysOpen = Math.ceil((today.getTime() - svOpen.getTime()) / (one_day));
            //subtracting SVNH open date from current date






            


            

            avgPts = parseFloat(totalPts)/parseFloat(daysOpen); 

            
            divId.innerHTML ="Average Patients Per Day: "+ avgPts.toFixed(1);
        }
         function GetDays(element) 
        {
            
            var el = document.getElementById(element);
            today = new Date();
            var cmas = new Date(today.getFullYear(), 6, 12);
            if (today.getMonth() == 6 && today.getDate() > 13) {
                cmas.setFullYear(cmas.getFullYear() + 1);
            }
            var one_day = 1000 * 60 * 60 * 24;
            el.innerHTML ="&nbsp;&nbsp;Days to open the second Hospital: &nbsp;&nbsp;&nbsp;"+Math.ceil((cmas.getTime() - today.getTime()) / (one_day));
        }
        function setTotalPts(totalPts)
        {
            totId = document.getElementById("leOne");

            totId.innerHTML = "This is my total patients: " + totalPts.toString();


        }

    </script>
</head>
<body onload="p1(); GetDays('count'); setTotalPts();"+"text"> <!-- this onload is passing the div ID to the function p1( element )
                                        element represents the ID -->

<div id='count' style="color: #e51400 ;
font-weight : 500;"></div>
</body>


<body>

<div id='avg' style="color: #e51400 ;
font-weight : 500;"></div>



</body>

<body>

<div id='leOne' style="color: #e51400 ;
font-weight : 500;"></div>




</body>
</html>


<!-- to keep a running count of the days i will have to subtract svOpen from todaysDate

My goal is to pass totalPts to an HTML ID that is on a different aspx file.

This is the link to the aspx file that contains the HTML ID I want to send it too.

https://tandemhospitalpartners.sharepoint.com/ININD/SitePages/Home.aspx

This is where I am really confused. I am not sure how to achieve this result. If anyone has ideas of how this could be done using JavaScript I would greatly appreciate it!

Upvotes: 0

Views: 525

Answers (2)

Zaigham Sarfaraz
Zaigham Sarfaraz

Reputation: 111

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            $("#dvValue").html(getUrlParameter("totalPointes"));
        });

        //This function gets the querystring value from the querystring
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        };
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="dvValue"></div>
    </div>
    </form>
</body>
</html>

Upvotes: 0

Zaigham Sarfaraz
Zaigham Sarfaraz

Reputation: 111

You cannot access another page's html from client side of another page as web is a stateless environment. But from the first page you can either pass the data through querystring to the next page or you can save data to localStorage, then navigate to the next page and retrieve data from localStorage. I prefer Querystring as it looks like its just a number you want to pass.

Suppose you have a button that opens up the second page

<asp:Button runat="server" ID="btnNext" OnClientClick="location.href='https://tandemhospitalpartners.sharepoint.com/ININD/SitePages/Home.aspx?totalPointes=' + getTotalPoints()" Text="Inind Home"></Button>

Then in the destination page the totalPoints from querystring and save it to the element. e.g.

$("#SomeID").val(getvaluefromQuerystring());

Upvotes: 1

Related Questions