Display 'sum' on another page

Question

I am currently having a problem displaying a calculated sum on the next page in javascript/html.

My calculation for defining the sum looks like this, where the 'sum + €' is displayed at the end.

function udregnPant() {


    let sum = 0;
    for (i = 0; i <= pantListParsed.length; i++) {


        let totalPantKr = pantListParsed[i].aPantMoney + pantListParsed[i].bPantMoney + pantListParsed[i].cPantMoney;
        sum += totalPantKr;

        console.log(sum);
        document.getElementById('sumAfPantB').innerHTML = sum + " €.";
    }


}

In the following HTML input I want to display the sum as the value instead of '10 €'

 <input type="text" name="amount" id="text1" value="10 €." readonly/>

Appreciate your help!

No, I am already calculating the sum when hitting a button on my first page. But I want to display this sum in a textbox on the next page — perpleksl, Nov 19 '19 at 16:41
So GeekZilva is right, then. You'll need to pass it to the page via query string or save it to `localStorage` or similar, and retrieve it on the target page. — Mitya, Nov 19 '19 at 16:43
How would the function for saving it to localStorage look like? — perpleksl, Nov 19 '19 at 16:46

hbamithkumara · Answer 1 · 2019-11-19T17:24:51.893

Make use of web storage.

sessionStorage - stores data for one session

sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')

localStorage - stores data with no expiration date

localStorage.getItem('label')
localStorage.setItem('label', 'value')

Example

function setSum(value) {
    localStorage.setItem("sum", value);
}

function getSum() {
    return localStorage.getItem("sum");
}

Live Example at JS Bin

References

Share data between html pages

HTML5 Web Storage

score 0 · Answer 2 · answered Nov 19 '19 at 17:14

0

After calculating your value, redirect the user to a URL with the value in the query string (See Redirections in HTTP) -- this may look something like

window.location = http://mysite/page2.html?amount=12

On the new page, retrieve the value from the query string using the searchParams property (see URL.searchParams). Could look something like:

let params = (new URL(document.location)).searchParams;
document.getByElementId('text1').value = params.get('amount');

answered Nov 19 '19 at 17:14

Brian Lacy

18,785
10
55
73

Other answers suggest using localStorage. This is a fine solution, but consider whether it may be overkill for your use case. If a query string works for you, and you're only passing one or two values, I would personally avoid cluttering the local Storage space. – Brian Lacy Nov 19 '19 at 18:06

score 0 · Answer 3 · answered Nov 19 '19 at 17:25

Here is a little example using local Storage, since so doesnt allow local storage try it in jsfiddle and the code sample as well:

document.getElementById('btnSend').onclick = ()=>{
let total = document.getElementById('txtTotal').value;
if(!isNaN(total) && total > 0){
localStorage.setItem('total', total);
document.getElementById('txtTotal').value = '';
}
}
document.getElementById('btnLastTotal').onclick = ()=>{
var lastTotal = localStorage.getItem('total');
if(lastTotal !=undefined){
alert('last total is:'+lastTotal);
}else{
alert('No records found');
}
}

<input type="text" id="txtTotal">
<br>
<input type="button" id="btnSend" value="Save the total"> <input type="button" id="btnLastTotal" value="get Last Total">

Hope it helps

Display 'sum' on another page

3 Answers3