Send Variable from one html to another
Question by lucky13
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?
Answer by Starx
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 😉
