Send Variable from one html to another

Question

I have 2 HTML pages, send.html and receive.html In each page I have a textield. The thing that I'm trying to do is whenever the "value" of the textfield in the send.html changes, automatically parse the data to the textfield value of the receive.html. When I say automatically I mean without the need of a button or reloading the pages.

To sum up.. I have this textfiled in the send.html

<input type="text" id="send" size="25" value="Val1">

And this text field in the receive.html

<input type="text" id="receive" size="25" value="Val2">

I want to "monitor" somehow the Val1, and if it changes I want Val2=Val1

For my purpose I cant use jquery. Is that possible?

You can or cannot use jQuery?

jacktheripper
– jacktheripper

2012-03-10 10:21:58 +00:00
Commented Mar 10, 2012 at 10:21 — jacktheripper
– jacktheripper, Commented Mar 10, 2012 at 10:21
"I have 2 hmtl pages"...???

Lion
– Lion

2012-03-10 10:22:43 +00:00
Commented Mar 10, 2012 at 10:22 — Lion
– Lion, Commented Mar 10, 2012 at 10:22

Starx · Accepted Answer · 2012-03-11 12:40:01Z

1

I think you are missing a big picture. Data sending and receiving needs some server side interaction like using PHP, ASP, JSP, Python etc., unless you are ok with cookies.

When you update a field in one age, that data needs to go the server somehow for another page to catch. Either way, the way you want it to go automatic is not possible right now. However, I will provide a solution of how you can do this using jQuery and PHP. But if you want?

Update

So, it seems cookies is the only option. Follow the following steps

Create a new file cookie.js and place the following code inside

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

Next, create two html file "test1.html" and "test2.html" with this markup

<html>
<head>
    <script src="cookie.js"></script>
</head>
<body>
    <input type="text" id="text1" name="text1" />
</body>
</html>

Now, on test1.html add the following script on the head

<script>
    window.onload = function() {
        document.getElementById("text1").onchange = function() {
                                                  // ^ use onkeyup if you want this to occur as you type
            setCookie("shared", this.value, 1);
            alert('oK, val changed so lets check it');              
        };
    };
</script>

On Test2.html add the following Script on the head

<script>
    var checkandupdate = function() {
           var shared = getCookie("shared");
           if(shared) {

              document.getElementById("text1").value = shared;
           }
    };

    window.onload = function() {
        int = setInterval("checkandupdate()",1000);
    };

</script>

Now

Open both pages
Go to test1.html and type something then press tab to get the alert message.
Open the test2.html, it should be update within 1 second
After the demo works, Update the field names as you need

Enjoy ;)

edited Mar 11, 2012 at 12:40

answered Mar 10, 2012 at 10:37

Starx

79.3k50 gold badges187 silver badges266 bronze badges

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

6 Comments

man_or_astroman Over a year ago

Thanx Starx, Unfortunately my web server supports these files...HTM, .HTML, .JS, .VBS, .INC, .STM, .XML, .XSL, .HTC,.CSS, .WML, .WMLS, .XHTML so i cand use PHP

man_or_astroman Over a year ago

Thank you very much Starx! Ive downloaded the cookies plugin and tryed with some code,upload it together with the jquery.cookie.js to my server but i wasent able to to do what i want.. =\ I also cant post code back here. Is it posible to post for me the code for send.html and receive.html in order to do what ive described at my first post? Thanx again!!

Starx Over a year ago

@lucky13, Check my update. I create a pure js solution. and its tested. Enjoy ;)

man_or_astroman Over a year ago

wow 100000 thanks Starx!! Its working as expected! =D another thing now..is it possible to skip the tab step (i mean the lose focus of the textfield)? So whenever i write something it will be automatically transferred to the page test2 page, even if the cursor is still at the textbox

Starx Over a year ago

@lucky13, use onkeyup event for that

|

Ashraf · Accepted Answer · 2012-03-10 10:27:32Z

0

In your second HTML page , let's say we call it like page-2.html?send=xyz when the value is being changed , you add the following JS Code :

function getQueryString() {
  var result = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

var sendValue= getQueryString()["send"];
document.getElementById("receive").value=sendValue;

answered Mar 10, 2012 at 10:27

Ashraf

2,6091 gold badge23 silver badges38 bronze badges

2 Comments

man_or_astroman Over a year ago

Yes but i think that in order to have page-2.html?send=xyz i have to write it at the textfield and the submit it, so its not been done automatically. Correct me if im wrong

Ashraf Over a year ago

Sure , then if the solution is not suitable for you please describe the issue in details in order to help .

Dilip Rajkumar · Accepted Answer · 2013-03-26 17:01:20Z

0

if you want to use without cookie for improving the performance.. you can use this library it uses window.name to carry the values.. however it will not work if the user opens in new tab.. still it is good.. only thing is you should handle new tab situation..

Hope this helps.. especially it will help if it is a html based front end..

answered Mar 26, 2013 at 17:01

Dilip Rajkumar

7,0746 gold badges64 silver badges78 bronze badges

Collectives™ on Stack Overflow

Send Variable from one html to another

3 Answers 3

Update

Now

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

Now

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related