Passing Variable Through JavaScript from One HTML Page to Another Page

Passing Variable through JavaScript from one html page to another page

Without reading your code but just your scenario, I would solve by using localStorage.
Here's an example, I'll use prompt() for short.

On page1:

window.onload = function() {
   var getInput = prompt("Hey type something here: ");
   localStorage.setItem("storageName",getInput);
}

On page2:

window.onload = alert(localStorage.getItem("storageName"));

You can also use cookies but localStorage allows much more spaces, and they aren't sent back to servers when you request pages.

Passing javascript variable from one html page to another page

The problem is with this line

document.getElementById("tBox").innerHTML = localStorage.getItem("message");

Here tBox is a an input element. So you have to use value instead of innerHTML

document.getElementById("tBox").value= localStorage.getItem("message");

Passing variable when opening another html page using JavaScript

I would just tell you some ways, hope you would be able to implement it:

1. Use query params to pass the variable.

When you're navigating to another page, add query params to the url.

window.open("MusicMe.html?variable=value", "_self");

In your next page, check for queryParam by getting window.location.href and using regex to split the params after ? and get that data.

2. Use localStorage/cookies

Before navigating to the next page, set a variable in your localStorage

localStorage.setItem("variable","value");
window.open("MusicMe.html", "_self");

In your second page, in the window load event.

 $(function() {
      if(localStorage.getItem("variable")) {

       // set the ID here
       // after setting remember to remove it, if it's not required
       localStorage.removeItem("variable");
      }

  });

how to pass value one page to another page using html

Plese try this code according to your requirement:

Source Page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
    <option value="ASP.Net">ASP.Net</option>
    <option value="PHP">PHP</option>
    <option value="JSP">JSP</option>
</select>

<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
    $(function () {
        $("#btnQueryString").bind("click", function () {
            var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
            window.location.href = url;
        });
    });
</script>

Destination Page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span id = "lblData"></span>

<script type="text/javascript">
    var queryString = new Array();
    $(function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $("#lblData").html(data);
        }
    });
</script>

How to pass data from one page to another page in html?

Both sessionStorage and localstorage will be work. You can choose anyone of this as per your requirement

sessionStorage,
Example:

  sessionStorage.setItem('name', 'my name');
  let data = sessionStorage.getItem('name');
  sessionStorage.removeItem('name');
  sessionStorage.clear();

localStorage:
Example :

       save data: localStorage.setItem('Name', 'My name');
       get data : localStorage.getItem('Name');
       remove data from local : localStorage.removeItem('Name');

I hope this will hellpful for you

How to pass data from one page to another page html

You can do it using Javascript, there's no restriction of which kind of object you can pass.
For instance, if you have several key-value objects:

var firstData = {
    'key1' : 'value1',
    'key2' : 'value2'
};

and

var secondData = {
    'key1' : 'value3',
    'key2' : 'value4'
};

you could enclose them using a Javascript array:

// This is on page1.html
var myData = [ firstData, secondData ];

and pass that array using localStorage.

Javascript on page1.html

// Set the variable
localStorage.setItem( 'objectToPass', myData );

Javascript on page2.html

// Get the variable
var myData = localStorage['objectToPass'];
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
var firstData = myData[0];
var secondData = myData[1];
alert('firstData: ' + firstData + '\nsecondData: ' + secondData);

---

Related Topics