| Intro Passing Data | Name & Value Muliple Elements | Variable & Value | Data to Popup Data from Popup | OpenerArrays | Form Method |
1) Pass name and value in url
<a href="page2.htm?Planet=Earth">Pass Data 1</a>
In page2.htm
<script type="text/javascript">
<!--
function getData(){
if(location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
tempArray=dataPassed.split("=") // split the string at character = and create an array of values
result=tempArray[0]+" "+tempArray[1] // assign the value
document.getElementById("display").innerHTML=result
}
}
// add onload="getData()" to the opening BODY tag
// -->
</script>
<div id="display"></div>
2) Pass multiple names and values in url
<a href="page2.htm?Planet=Earth&Hello=World">Pass Data 2</a>
In page2.htm
<script type="text/javascript">
<!--
function getData(){
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
result=""
passedString=dataPassed.split("&") // split the string at character & and create an array of values
for(i=0;i<passedString.length;i++){
tempArray=passedString[i].split("=") // split the string at character =
result+=tempArray[0]+" "+tempArray[1]+"<br>" // assign the value
}
document.getElementById("display").innerHTML=result
}
}
}
// add onload="getData()" to the opening BODY tag
// -->
</script>
<div id="display"></div>
In this example we pair up the actual textbox with its value
<script type="text/javascript">
<!--
myString=""
function passdata(){
myForm=document.f1
for(i=0;i<myForm.length-1;i++){ // run through form elements
myString+=add_delimiters(myForm.elements[i].name,myForm.elements[i].value) // get element name and value
location.href = 'page2.htm' + '?' + escape(myString)
}
function add_delimiters(n,v){
if(n!=""){ // add = and & characters to identify name and value pairs
return n+"="+v+"&"
}
}
}
// -->
</script>
<form name="f1">
Text 1 <input type="text" name="text1" value="One" size="5">
Text 2 <input type="text" name="text2" value="Two" size="5">
Text 3 <input type="text" name="text3" value="Three" size="5">
Text 4 <input type="text" name="text4" value="Four" size="5">
<input type="button" value="Pass Values" onclick="passdata()">
</form>
In page2.htm
<script type="text/javascript">
<!--
function getData(){
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
tempArray1=dataPassed.split("&") // split the string at character & and create an array of values
for(i=0;i<tempArray1.length-1;i++){ // get value at array index i (name=value)
tempArray2=tempArray1[i].split("=") // split the string at character =
document.f1.elements["text"+(i+1)].value=tempArray2[1] // assign the value
}
}
}
// add onload="getData()" to the opening BODY tag
//-->
</script>
<form name="f1">
Text 1 <input type="text" name="text1" size="5">
Text 2 <input type="text" name="text2" size="5">
Text 3 <input type="text" name="text3" size="5">
Text 4 <input type="text" name="text4" size="5">
</form>