How Can I Pass Values From One Html Page To Another Html Page Using Javascript

April 22, 2024 Post a Comment

In first page im getting value in textbox i need to pass it to another page which is divided into 2 frames. I need to display that value in first frame's html page. Please provide

Solution 1:

I would go with localStorage, as @MicrosoftGoogle propose, but is not well supported yet, you can use pure javascript to achieve this. You will have something like this on your form page:

<form action="param-received.html" method="GET">
   <input type="text"id="foo" name="foo">
   <input type="submit" value="Send" name="submit"id="submit">
</form>

Once you click on Send button,you will be redirect to /param-received.html?foo=hola&submit=Send.

location.search attribute contains the chain of parameters.
? concatenates the URL and the string of parameters.
& separates multiple parameters.
= assigns a value to the variable.

Here is the complete code to process data sent on param-received.html:

<scriptlanguage="JavaScript">functionprocessForm()
  {
    var parameters = location.search.substring(1).split("&");
    var temp = parameters[0].split("=");
    l = unescape(temp[1]);
    alert(l); //Dialog with the text you put on the textbox
  }
  processForm();
</script>

Solution 2:

Write the value in a cookie and read the cookie from the other page.

For writing and reading cookies check here

Solution 3:

You could use the GET part of the request or cookies

Solution 4:

if url parameters are an option you could use this

functiongetParameter(param) {
                var val = document.URL;
                var url = val.substr(val.indexOf(param))  
                var n=parseInt(url.replace(param+"=",""));
                alert(n+1); 
}
getParameter("page");

ref http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

another might be cookies

was beaten to the cookie part :p

edit indeed not a good cookie reference this one is better http://www.w3schools.com/js/js_cookies.asp

Solution 5:

functiongetValue(varname)
                {
                    var url = window.location.href;
                    var qparts = url.split("?");

                    if (qparts.length == 1)
                    {
                        return"";
                    }
                    else{
                        var query = qparts[1];
                        var vars = query.split("&");
                        var value = "";
                        for (i=0;i<vars.length;i++)
                        {
                            var parts = vars[i].split("=");
                            if (parts[0] == varname)
                            {
                                value = parts[1];
                                break;
                            }
                        }
                        value = unescape(value);

                        // Convert "+"s to " "s
                        value.replace(/\+/g," ");
                        return value;
                    }

                }
varVariableGot = getValue(YourPassingVariableName);

Just copy the function into your html file and pass your variable name to the function which is send through GET Method.Now You will get the value of the variable from url.

javascript magazin