global variable not displayed in div

Question

I declare a variable at the beginning of my .js file:

var option="blabla";

On page 1.html I click on a link to page 2.html where I have

<script>document.write(option);</script>

No text is displayed on 2.html. When I refresh the browser while I am on 2.html I get undefined as an output.

What do I have to do to have the text displayed straight after I click the link?

Alternatively, how can I get the following code work to output strUrl on 2.html:

on 1.html I have a link:

<a href="2.html" onclick="function1("item")">

on 2.html I have a div:

<div id="display">document.write(strUrl);</div>

then I have in my .js file:

function1(searchitem)
{
    strUrl = 'http://blabla.com/' 
    + '?key=' + searchitem;
}

Could you show the relevant code here? It's hard to answer without seeing some actual code. There are lots of different things that could be at play. — RobertAKARobin, Jan 02 '16 at 14:16
Your JS context is lost on page refresh or change, that's not the way you pass variables between pages. — Lucas Trzesniewski, Jan 02 '16 at 14:18
Global vars can be shared between pages if for instance: 1.html had an iframe and in the iframe is 2.html or vice versa of course. — zer00ne, Jan 02 '16 at 14:39
How about the alternative which I added to my question? It's always blank for me. — , Jan 02 '16 at 14:57

score 2 · Answer 1 · edited May 23 '17 at 12:04

You try to create a Javascript variable on a page and then use it on another page. This is a more-or-less broad problem, since you want to maintain values across pages. First of all, you need to decide where is this value going to be defined and where is it going to be used. If this is more like a server-side variable, then you need to define it on server-side and then generate it into your Javascript code. If you are using PHP, then you can do it like this:

<script type="text/javascript>
    var foo = '<?php echo $bar; ?>';
</script>

Naturally, you need to initialize $bar to be able to do that. If the variable should be a client-side variable, then you need to use localStorage, like this on 1.html:

localStorage.setItem("option", "blablabla");

and then load it on 2.html:

localStorage.getItem("option");

Or, if you need to use it both on server-side and client-side, then you can use a cookie for this purpose. Using cookies i slightly more complex, but my answer to another question should get you going.

Let's focus on the cause this did not work for you. A Javascript variable will cease to exist when the page is unloaded, so you will not be able to use its value after that. So, you need to persist it somehow, storing it either on the server or the computer where the browser is being run.

As a side-note, I should mention that you can use Javascript variables accross pages if you load some pages inside iframes of a page, but that is a different scenario.

score 0 · Answer 2 · edited May 23 '17 at 10:28

This is what FORMS and AJAX were invented for. If your server has a PHP processor (virtually ALL of them do), then you can rename your .html files to .php and use a bit of PHP to accomplish your goal.

A web page ending with .PHP works exactly the same as one ending in .html, except that you can now add snippets of PHP code where desired. It is not necessary to have any PHP code, but if you have some it can do stuff.

Method One: FORMs

If you want to switch to page2.html and see a value sent from page1.html, you can use a FORM construct and post the data from page1 to page2:

page1.php

<form action="2.html" method="post">
    <input name="option" type="text" />
    <input type="submit" name="sub" value="Go" /> 
</form>

page2.php

<?php
    $p1 = $_POST['option'];
?>
<div>On page1 of this website, you typed: <?php echo $p1; ?>.  That's what you did.</div>

Note how a <form> uses the name= attribute for the name of the variable that is sent to the other side.

Example Two: The AJAX method

HTML:

<div id=nonForm">
        <input id="option" type="text" />
        <input type="button" id="myButt" value="Go" /> 
</div>
<div id="results"></div>

jQuery:

$('#myButt').click(function(){
    var opt = $('#option').val();
    $.ajax({
        type: 'post',
         url: 'page2.php',
        data: 'option='+opt,
        success: function(john){
            if (d.length) alert(john); //display result from Page2 in a pop-up box
            $('#results').html(john);  //Or, display it right on the page
        }
    });
});

PAGE2.PHP -- The AJAX processor file

<?php
    $opt = $_POST['option'];
    //Now, you can do something with the data in $opt, and then send back a result

    $rtn = 'Hey, you sent: ' .$opt;
    echo $rtn;

The primary (and most important) difference between the two methods is that the FORM will change pages on you. The user will be sent from Page1 to Page2, and the screen will flash as this happens.

What's exciting about AJAX is it sends data to Page2, where Page2 can do something with it (for example, a database lookup), and then Page2 sends different data back to Page1. This new data can then be displayed on the page WITHOUT the page refreshing.

Here are a couple of very basic AJAX examples, to get you going:

AJAX request callback using jQuery

global variable not displayed in div

2 Answers2