How to pass an a value from a page to another using javascript

Question

How do you pass a value or an array from one page to another in html using javascript. I'm not allowed to use local storage or sessions only pass the variable from page to page. I'm sending values from a radio button. I intend to store the results in array as i am keeping track of the users answer to display the result at the end. How do i send an array to quiz_5.html? I intend to keep passing the array instead of using a cookie or local storage as i am not permitted to.

Below is My code:

<div>
    <form>
        <input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov
        <input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br>
        <input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook
        <input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br>

        <input type="button" value="Submit & Next Question" onclick="getAnswer4(this.form)" class="firstRow">
        <input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)" class="secondRow">
    </form>
</div>

Javascript code:

function getAnswer4(form) {
    var a[];
    var value;

    var checked = form.querySelector("input[type=radio]:checked");

    if(!checked) {
        alert('Please select an answer');
        return;
    }
    else{
        value = checked.value;

    }
    a.push(value);
    location.href = "quiz_5.html";
}

Query string maybe ? http://yourwebsite.com/page2.html?variablefrompage1=test then read the query string from javascript on your page2 ? — G-Man, Mar 05 '16 at 02:45
are you allowed to use php and query strings appended to the page url? www.samplePage.php?q=testValue and then on the samplePage, get the query from the using the $_GET super global array — gavgrif, Mar 05 '16 at 02:47
It depends on what a "page" is. Is the page loaded over AJAX? Is the page another window that is opened with `window.open`? Is the page opened via a generated link? — Derek 朕會功夫, Mar 05 '16 at 02:47
@gavgrif updated the question and added more details with more code — Jennifer Fitzgerald, Mar 05 '16 at 03:00
@MdeLorimier updated the question and i am not allowed to used cookies either. Just passing variable from page to page — Jennifer Fitzgerald, Mar 05 '16 at 03:01
@Gamsh how do i pass from a javascript function to html page and vice versa. My code is shown and updated — Jennifer Fitzgerald, Mar 05 '16 at 03:02
no i didn't update the question or add code - i just posted a comment ( are you allowed to use php and query strings appended to the page url? www.samplePage.php?q=testValue and then on the samplePage, get the query from the using the $_GET super global array ) — gavgrif, Mar 05 '16 at 03:02
@gavgrif not allowed to used php only javascript. No I meant i updated the question — Jennifer Fitzgerald, Mar 05 '16 at 03:06
then you have to still use the query string and use javasvript to get that query from the url and pass it into the function on the second page — gavgrif, Mar 05 '16 at 03:06
@gavgrif please could show me an example as i am new to javascript — Jennifer Fitzgerald, Mar 05 '16 at 03:12
sorry Jennifer - I am an ex-teacher and firmly believe in the value of self-education to find and understand new concepts. I am happy to help, but you need to research for yourself how to get the url, split it into component parts (hint - look up "split" in js) and utilise the portion you require. The best way to learn is to do it rather than be given the answer directly. Do some research, post what you come up with and I would be happy to help from there. :) — gavgrif, Mar 05 '16 at 03:16
use method `pass_answer(a);` then you can create an javascript function in `quiz_5.html` like `function pass_answer(answer){.......}` — Gamsh, Mar 05 '16 at 03:27
Your options are as follows: Cookie, Session, URL hash, or sending GET Data to the page you want. — StackSlave, Mar 05 '16 at 03:35
A GET URL would work, using a loop and `.querySelectorAll()`. — StackSlave, Mar 05 '16 at 04:12
what i said all along - pass the query string, get the location from the url, split the location to get the value and do something with the value. that is what a query string is for — gavgrif, Mar 05 '16 at 04:17
Possible duplicate of [How can I pass a value from one HTML page to another using JavaScript?](http://stackoverflow.com/questions/7267519/how-can-i-pass-a-value-from-one-html-page-to-another-using-javascript) — Dr.jacky, Mar 05 '16 at 04:59

StackSlave · Answer 1 · 2016-03-05T07:00:43.370

1

You should just have one HTML button for the entire form. First, let's fix that form tag:

<form name='form' id='form' method='get' action='quiz_5.php'>

Now let's add a submit button to the bottom of the form:

<input type='submit' name='sub' id='sub' value='Submit' />

On quiz_5.html

var pre = onload;
onload = function(){
if(pre)pre();

var resultObject = {};
var fs = location.search.replace('?', '').split('&');
for(var i=0,l=fs.length; i<l; i++){
   var z = fs[i].split('=');
   resultObject[decodeURIComponent(z[0])] = decodeURIComponent(z[1]);
}
/* resultObject now has values based on name attibute
   for instance resultObject.radio will hold value of name='radio' where it's checked */
}

edited Mar 05 '16 at 07:00

answered Mar 05 '16 at 03:46

StackSlave

10,613
2
18
35

what do u mean #yourHashHere is that where i include the variable array – Jennifer Fitzgerald Mar 05 '16 at 03:49
Oh, that would only work for a single String value. In this case `'yourHashHere'`. You want a Cookie or a GET URL instead. What would you need an Array for? Only one radio is selected based on the name attribute. – StackSlave Mar 05 '16 at 03:55
i have 5 questions and i tend to use the array to keep track of the users answers. If i use one variable it overwrites the previous questions – Jennifer Fitzgerald Mar 05 '16 at 04:00
cunning tip if you want to pass a sequence of answers (each of which has a correct / incorrect answer.....join them into a single string - pass it like PHPglue suggests (although i would use a query string rather than the hash (which semantically is used to target an id on the second page rather than a query value, but thats me). So if i answer 5 questions and get the first 3 correct and the last 2 incorrect - then the string will be #cccii.... you can then split these into the 5 results on page 2. Alternatively use number 1 for correct and 0 for incorrect (making it #11100)... – gavgrif Mar 05 '16 at 04:07
Look at the code again, just updated. You may want to look into jQuery and [$(formSelector).serialize()](https://api.jquery.com/serialize/) as well. – StackSlave Mar 05 '16 at 05:01
@PHPglue yes i'm taking a look – Jennifer Fitzgerald Mar 05 '16 at 05:18
good work PHP, but surely OTT? Would a simple method="GET" form not suffice on the first page with the second page as the action? this would give the checked radio values in the query string to the second page when the entire form is submitted?? All that is required is the name and value of the selected radio options... – gavgrif Mar 05 '16 at 05:22
That is true, I was thinking in terms of AJAX. – StackSlave Mar 05 '16 at 05:59
@PHPglue i wasn't allowed to use ajax – Jennifer Fitzgerald Mar 05 '16 at 06:57
I didn't use it. Check out current answer. – StackSlave Mar 05 '16 at 06:58

score 1 · Answer 2 · edited Oct 18 '22 at 23:59

Sorry if my comments seemed harsh, but I am all about new coders learning the basics themselves without relying on having the answers provided. Just to show it can be done - I just created three HTML pages. Created a form in the first two - each with your questions (questions 1 and 2 in the first page and question 3 in the second page), and passed the form values to the next one, using nothing more than html.

Then using only JavaScript on the second and third pages, I grabbed the values out of the URL and did stuff with them. On page two, I re-used the values from page 1 (think how that might have been done and why it is useful) so that all three values are passed to page 3 which then used JavaScript only to grab the 3 values, display them on the page (as shown in the code section below) and calculate the total and the percentage of answers that are correct. Note that I answered the questions so that I got question 2 incorrect.

Note that I am not giving the code used, but will give you the URL of the pages so that you can see the outcome of the previous two pages and can then start to think how I achieved this.

numbers1.html
numbers2.html?one=correct&two=incorrect
numbers3.html?one=correct&two=incorrect&three=correct

Question 1: correct

Question 2:incorrect

Question 3:correct

2/3

0.67% correct

Not a traditional answer I know, but it is not ideal for learners simply ask for the answer to be provided, especially when in 10 minutes I was able to put together the three pages that achieved the outcome. If you do not try then you will not learn for yourself.

(Side note for readers: this answer [and this one](http://stackoverflow.com/a/35813676/472495) are identical, see the comments on the other copy). — halfer, Mar 05 '16 at 12:53

How to pass an a value from a page to another using javascript

2 Answers2

Linked