Passing data between two aspx pages using javascript

Question

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!

Zaigham Sarfaraz · Accepted Answer · 2017-08-15 19:58:56Z

1

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());

answered Aug 15, 2017 at 19:58

Zaigham Sarfaraz

1114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hcienfue Over a year ago

Thank you so much for your response. I still have a few questions if you don't mind. Would I have to create a javascript function on the second page? Do I have to do this through a button? And will I have to create a getTotalPoints() method in the javascript that is in the first page? From my understanding it seems like getTotalPoints() will be a method in my JS on the first page that will have a return line which returns the variable I would like to use?

Zaigham Sarfaraz · Accepted Answer · 2017-08-16 14:32:20Z

0

<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>

answered Aug 16, 2017 at 14:32

Zaigham Sarfaraz

1114 bronze badges

1 Comment

Zaigham Sarfaraz Over a year ago

i am retrieving the value from querystring parameter "totalPointes" and saving its value to a div with ID "dvValue"

Collectives™ on Stack Overflow

Passing data between two aspx pages using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related