Using variables from the same js file in 2 html files with JQuery

Question

I am trying to get my variable I have saved to display on a table I have created on another page. I get the information from the user from a form, and have a button that is clicked and fires off to save the values into variables. My problem is that I can't change the inner html on the other page with the variable I have saved. I am using 1 js file and 2 html files. I can only use js/jquery, html, and css. here is my code:

loanpage.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Super Awesome Loan Guys</title>
    <link rel="stylesheet" type="text/css" href="loanpage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
    <div class="bg" id="text-center">
        <div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
        <div>
            <form action="infopage.html">
                <h4>Loan Amount:</h4>
                <input type="text" id="loanamount" name="loanamount"><br>
                <input type="radio" id="12month" name="time">12 Months
                <input type="radio" id="18month" name="time">18 Months
                <input type="radio" id="24month" name="time">24 Months
                <h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
                <h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
                <h4>Email:</h4><input id="emailfield" type="text" name="email">
                <h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
            </form>
            <a href="infopage.html"><button type="button">Submit</button></a>
        </div>
    </div>
</body>
</html>

infopage.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Super Awesome Loan Guys Loan Information</title>
    <link rel="stylesheet" type="text/css" href="loanpage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="loanpage.js"></script>
</head>

<body>
    <div class="bg" id="text-center">
        <h1>Here is the info you submitted!</h1>
        <table>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
                <th>Email Address</th>
                <th>Zip Code</th>
                <th>Loan Amount</th>
                <th>Loan Duration</th>
                <th>Interest</th>
            </tr>
            <tr>
                <td id="displayName">1</td>
                <td id="displayPhone">1</td>
                <td id="displayEmail">1</td>
                <td id="displayZip">1</td>
                <td id="displayAmount">1</td>
                <td id="displayDuration">1</td>
                <td id="displayInterest">1</td>
            </tr>
        </table>
    </div>
</body>
</html>

loanpage.js

//js code
var name = "";
var phone="";
var email="";
var zip="";
var loan=0;
var loanrate=12.0;
var loanlen=0;
//Jquery code
$(document).ready(function (){
    $("#submitbutton").click(function(){
       loan = parseFloat($("#loanamount").val());
    if ($("#12month").is(':checked')){
        loanlen = 12;
    }
    else if ($("#18month").is(':checked')){
        loanlen = 18;
    }
    else if ($("#24month").is(':checked')){
        loanlen = 24;
    }
    name = $("#namefield").val();
    phone = $("#phonefield").val();
    email = $("#emailfield").val();
    zip = $("#zipfield").val();
    document.getElementById("displayName").innerHTML(name);
    document.getElementById("displayPhone").innerHTML(phone);
    document.getElementById("displayEmail").innerHTML(email);
    document.getElementById("displayZip").innerHTML(zip);
    document.getElementById("displayAmount").innerHTML(loan);
    document.getElementById("displayDuration").innerHTML(loanlen);
    document.getElementById("displayInterest").innerHTML(loanrate);
});

});

Javascript doesn't have a set-state by default, so variables set on one page won't be available in another page, unless they're transferred to that page, either via GET or POST-variables, localStorage or by having both pages open in the same browser simultaneously (or loading the second page via iframe or ajax). — junkfoodjunkie
– junkfoodjunkie, Commented Dec 16, 2016 at 3:13
@Jersh I don't think so. I am supposed to click the submit button and be taken to the info page, and I need access to those variable in the js file to change the inner html of the info page — Nick D
– Nick D, Commented Dec 16, 2016 at 3:16
As previously stated look into localStorage. Beware of browser support. — Aldana
– Aldana, Commented Dec 16, 2016 at 3:19

Josh · Accepted Answer · 2016-12-16 03:20:39Z

2

Local Storage is your best bet.

// Save data to the current local store
localStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + localStorage.getItem("username"));

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

answered Dec 16, 2016 at 3:20

Josh

72510 silver badges25 bronze badges

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

2 Comments

Nick D Over a year ago

After looking at it, I am not sure how to really use it, and c9 says that localStorage is undefined

Josh Over a year ago

Hmm.. I tried the code in a jsfiddle, it works fine. Check your browser compatibility? Also, what's your code look like?

Collectives™ on Stack Overflow

Using variables from the same js file in 2 html files with JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related