CODEWITHSUNDEEP
javascripthtmlajaxvariables
man_or_astroman
man_or_astroman

Reputation: 648

Send Variable from one html to another

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?

Upvotes: 1

Views: 3704

Answers (3)

Dilip Rajkumar
Dilip Rajkumar

Reputation: 7074

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..

Upvotes: 0

Starx
Starx

Reputation: 78971

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 ;)

Upvotes: 1

Ashraf
Ashraf

Reputation: 2632

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;

Upvotes: 0

Related Questions