...

View Full Version : how to pass variables to a new html page?? -javascript



ainwana
04-29-2008, 01:58 AM
I need some help with javascript..how to pass variables to a new html page..i.e user needs to fill in a form that hv multiple fields(include text and select) when they've confirmed the form's copy will be displayed in new page but they cant modify the field..i hv done the form part but i dont know how to pass the variables:confused: can i pass it to external .js file then extract form there?how?..help plzz

mjlorbet
04-29-2008, 02:04 AM
your main page


<script type="text/javascript">
var mywin;
var isOpen = false;
var passVal;
var searchInt;
function doOpen(val){
passVal = val;
mywin = window.open("newurl.html");
searchInt = setInterval(function(){if(isOpen){mywin.document.getElementById("your_field").value = passVal; clearInterval(searchInt);}}, 100);
}
</script>


newurl.html


<html>
<head>
<script type="text/javascript">
window.onload = function(){window.opener.window["isOpen"] = true;};
</script>
</head>
<body>
<div>
<input type="text" disabled="true" id="your_field" />
</div>
</body>
</html>


install the feature like this


<input type="text" id="text_field" />
<input type="button" onclick="doOpen(document.getElementById('text_field'));" />

ainwana
04-30-2008, 01:37 AM
i've tried the code but it seems the variable is not passed..what if i want to pass it to a new page in the same browser window?:(

mjlorbet
04-30-2008, 02:08 AM
like the next page loaded, or in an iframe, or in a frame?

ainwana
04-30-2008, 03:01 AM
The next page loaded..so if user wants to edit the form they can go back

mjlorbet
04-30-2008, 04:29 AM
put the fields inside a form, set the action proptery of the form to the next page, and set the method to "get". that will pass the values (along with the names of the fields the values were from) in the query string to the following page so that you can extract them. the extraction is commonly done with asp, asp.net, php, jsp, or another serverside language. you can, however, do it with javascript as well.



<script type="text/javascript">
window.onload = function(){
var dl = document.location;
var qs = dl.split("?")[1];
var elements = qs.split("&");
for(var a = 0; a < elements.length; a++){
try{document.getElementById(elements.split("=")[0]).value = elements.split("=")[1];}catch(ex){}
}
}
</script>

would go in your second page, you'd have all the same fields in the new page as in the old page (with the same ids as well) excepting for you'd put
disabled="true" on each input so that the user can't edit them.

ainwana
04-30-2008, 06:32 AM
I've tried but at the 2nd page, fields are all blank

mjlorbet
04-30-2008, 06:35 AM
post your code

ainwana
04-30-2008, 06:49 AM
//1.html--1st page
<HTML>
<HEAD>

<TABLE><td><PRE>
<FORM NAME="myform" ACTION="2.html" METHOD="GET">
Id : <INPUT TYPE="text" NAME="Id" id="id" SIZE=10 MAXLENGTH=9 VALUE=""><P>
Status : <select name="stat" size=1>
<option>OPEN
<option>CLOSE
</select><P>
</PRE></td></TABLE>
<INPUT TYPE="Submit" Value="Submit">
</HTML>

//2.html--2nd page
<html>
<script type="text/javascript">
window.onload = function(){
var dl = document.location;
var qs = dl.split("?")[1];
var elements = qs.split("&");
for(var a = 0; a < elements.length; a++){
try{document.getElementById(elements.split("=")[0]).value = elements.split("=")[1];}catch(ex){}
}
}
</script>

<TABLE><td><PRE>
<FORM NAME="myform" METHOD="GET">
Id : <INPUT TYPE="text" NAME="id" id="id" SIZE=10 MAXLENGTH=9 disabled="true"><P>
Status : <select name="stat" size=1 disabled="true">
<option>OPEN
<option>CLOSE
</select><P>
</PRE></td></TABLE>

</form>
</html>

mjlorbet
04-30-2008, 06:56 AM
when you post code, please post it between code tags, simply hilight the code (once it's in the reply box) and click the # symbol in the reply box

//1.html--1st page

<html>
<head>
</head>
<body>
<form id="myform" action="2.html" method="GET">
<table><tr><td><pre>
Id : <input type="text" id="ident" size="10" maxlength="9" value=""/>
<p>
Status : <select id="stat" size="1">
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
</select></p>
</pre></td></tr></table>
<input type="Submit" value="Submit" />
</body>
</html>

//2.html--2nd page

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var dl = document.location;
var qs = dl.split("?")[1];
var elements = qs.split("&");
for(var a = 0; a < elements.length; a++){
try{document.getElementById(elements[a].split("=")[0]).value = elements[a].split("=")[1];}catch(ex){}
}
}
</script>
</head>
<body>
<form id="myform" action="/" method="GET">
<table><tr><td><pre>
Id : <input type="text" id="ident" SIZE="10" MAXLENGTH="9" disabled="true" /><p>
Status : <select id="stat" size="1" disabled="true">
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
</select></p>
</pre></td></tr></table>
</form>
</body>
</html>

ainwana
04-30-2008, 07:01 AM
Sorry I didnt know..so what do u think??

mjlorbet
04-30-2008, 07:06 AM
i've corrected it, read the code above

ainwana
04-30-2008, 07:13 AM
why is it still the same?fields are all blank at he 2nd page

mjlorbet
04-30-2008, 07:26 AM
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var dl = document.location.href;
var qs = dl.split("?")[1]?dl.split("?")[1]:"";
var elements = qs.split("&");
for(var a = 0; a < elements.length; a++){
try{document.getElementById(elements[a].split("=")[0]).value = elements[a].split("=")[1];}catch(ex){}
}
}
</script>
</head>
<body>
<form id="myform" action="/" method="GET">
<table><tr><td><pre>
Id : <input type="text" id="ident" SIZE="10" MAXLENGTH="9" disabled="true" /><p>
Status : <select id="stat" size="1" disabled="true">
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
</select></p>
</pre></td></tr></table>
</form>
</body>
</html>


code was slightly off for page2.html.

anyways, since you're posting to an html page the query string is going to be ignored (in transmission), that's why it's not working right. if you were running asp or php, the querystring would be persisted. also, if you're running locally (without being on a server, ie localhost or 127.0.0.1 for self references) it's likely that the form action will just be ignored.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum