1

I've got 2 HTML files and 1 javascript file, index.html, results.html and file.js

Inside index.html I retrieve user input which is used to do some calculations inside the javascript file. The calculating starts when a button is pressed. Now I want to display the data retrieved from index.html to display on results.html so when pressing the button it should run the function and go to another page.

It all works fine to calculate and show the results on 1 page, but I don't know how to display the results on results.html.

This is how a piece of the code looks:

function berekenKoolBehoefte(){
    koolBehoefte = (energieBehoefte - (eiwitBehoefte * 4) - vetBehoefte) / 4;
    toonKool();
}

function toonKool(){
    var uitkomstKool = document.getElementById("uitkomstKool");
    uitkomstKool.innerHTML = (koolBehoefte * 4).toFixed(1) + " kcal" + " " +     koolBehoefte.toFixed(1) + " gram"
}
bereken.addEventListener('click', berekenKoolBehoefte, false);

This displays all on 1 page, know function toonKool() should be display inside results.html

varela
  • 1,281
  • 1
  • 10
  • 16
Koen
  • 1,931
  • 1
  • 11
  • 9

2 Answers2

2

Your best bet in this case is to use:

  • server side to store the values and get the results from there
  • cookies - if it's small data, simply put it inside a cookie. For more info how to use cookies with plain javascript look here
  • attach your results to url and then parse them with JS. You can see how it's done here
  • iFrame - you can attach your results in an iframe and access the data. This method is quite good, but for my taste - it's awful
Community
  • 1
  • 1
lukas.pukenis
  • 13,057
  • 12
  • 47
  • 81
  • So I can't just push the data from my JS file to an id inside a second html file? – Koen Jul 19 '12 at 14:36
  • You can not open another file with JS. Once you press a button, javascript variables exist for your index.html page only. You can access the data if you use an iFrame – lukas.pukenis Jul 19 '12 at 14:37
  • Well, you can open another file with window.open(URL,name,specs,replace), but I need the data to come with it and be able to place it in the id tags of that other file – Koen Jul 19 '12 at 14:57
  • put your data in a cookie after calculation and extract it on your results – lukas.pukenis Jul 19 '12 at 15:01
  • I'll try that, do you think using indexedDB or localstorage would be better as a cookie to save it? – Koen Jul 19 '12 at 15:02
  • no, 3rd means attaching the results to URL. URL has a limit of around 2,000 characters. – lukas.pukenis Jul 19 '12 at 15:48
1

I think you'd better:

1) Create form on your page aroud the button.

2) On form submit do calculations and put result to hidden field in the form (Or post all fields for calculation to server side). Then all arguments that you want to pass would be accessible on server on second page.

3) Display second page using GET or POST argument from previous.

Cookies is something that you may forgot to clear and it's much harder to manage them.

Calculation in iframe is much worse then using ajax. You may use ajax for partial load the second page, then all javascript variables would remain.

varela
  • 1,281
  • 1
  • 10
  • 16
  • GET or POST would mean I've to use PHP, is there a possibility to do it with only JS? – Koen Jul 19 '12 at 14:58
  • You may use AJAX. If you will update first page to the second using AJAX (with no explicit second page loading) then you can do anything you want. Javascript objects will remain on the page – varela Jul 19 '12 at 15:12
  • I'll try this option to and see which works best for me. Thanks! – Koen Jul 19 '12 at 15:20
  • The hidden field did the trick, some times things look harder as they are :) Thanks! – Koen Jul 19 '12 at 16:37