| Intro Passing Data | Name & Value Muliple Elements | Variable & Value | Data to Popup Data from Popup | OpenerArrays | Form Method |
An example of passing data from a variety of form elements.
<script type="text/javascript">
<!--
exclusions = new Array() // element values not to be passed
exclusions[0]="" // place elements name between quotes
exclusions[1]=""
exclusions[2]=""
function passData(){
myString=""
this.form=document.f1
for(elNum=0;elNum<this.form.length;elNum++){ // run through form elements
this.type=this.form.elements[elNum].type
this.name=this.form.elements[elNum].name
this.value=this.form.elements[elNum].value
sendMe=true
if(this.type=="password"){ // do not include passwords
sendMe=false
}
for (ex=0;ex<exclusions.length;ex++){
if(this.name==exclusions[ex]){
sendMe=false;
}
}
if(sendMe) {
if (this.type=="text"||this.type=="hidden"||this.type=="password"||this.type=="textarea"){
myString+=addDelimiters(this.name,this.value) // add element name and value to array
}
if(this.type=="checkbox"||this.type=="radio"){
if(this.form.elements[elNum].checked){
myString+=addDelimiters(this.name,this.value) // add element name and value to array
}
}
if (this.type=="select-one"){ // Selection lists (single).
if (this.form.elements[elNum].selectedIndex>= 0){
myString+=addDelimiters(this.name, this.form.elements[elNum].options[this.form.elements[elNum].selectedIndex].value)
}
}
// Selection lists (multiple). Add a unique name/value pair for each selected item.
if(this.type=="select-multiple"){
for(optIndex=0;optIndex<this.form.elements[elNum].options.length;optIndex++){
if(this.form.elements[elNum].options[optIndex].selected){
myString+=addDelimiters(this.name, this.form.elements[elNum].options[optIndex].value)
}
}
}
}
}
location.href="page2.htm"+'?'+escape(myString)
}
function addDelimiters(n,v){
if(n!=""){
return n+"="+v+"&" // add characters = to tag name and value and & to tag the pair (name1=value1&name2=value2)
}
else{
return "=&"
}
}
// -->
</script>
<form name="f1">
<table border="0"><tr valign="top">
<td><BR>
<input type="text" name="t1" value="textbox 1" size="15"><BR>
<input type="text" name="t2" value="textbox 2" size="15"><BR>
<input type="password" name="pwd" size="15"><BR>
<input type="hidden" name="hide" value="test">
</td>
<td width=150px><BR>
1<input type="radio" name="r1" value="radio 1">
2 <input type="radio" name="r1" value="radio 2">
3 <input type="radio" name="r1" value="radio 3">
4 <input type="radio" name="r1" value="radio 4"><BR><BR>
1 <input type="checkbox" name="c1" value="checkbox 1">
2 <input type="checkbox" name="c2" value="checkbox 2">
3 <input type="checkbox" name="c3" value="checkbox 3">
4 <input type="checkbox" name="c4" value="checkbox 4">
</td>
<td>
Single<br>
<select name="s1" size="4" select-one>
<option value="sopt1">Option 1
<option value="sopt2">Option 2
<option value="sopt3">Option 3
<option value="sopt4">Option 4
</select>
</td>
<td>
Multiple<br>
<select name="s2" size="4" multiple>
<option value="mopt1">Option 1
<option value="mopt2">Option 2
<option value="mopt3">Option 3
<option value="mopt4">Option 4
</select>
</td>
<td><BR>
<textarea name="tarea">Hello</textarea>
</td></tr>
<tr>
<td colspan="5" align="center"><BR><input type="button" value="Send Me" onclick="passData()"></td>
</tr></table>
</form>
<script type="text/javascript">
<!--
// ********** recieve (and reformat) the string **********
function getData(){
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
this.form=document.f1
dataString=dataPassed.split("&") // split the string at character & and create an array of values
for(elNum=0;elNum<this.form.length;elNum++){ // run through form elements
this.type=this.form.elements[elNum].type
this.name=this.form.elements[elNum].name
this.value=this.form.elements[elNum].value
for(nv=0;nv<dataString.length-1;nv++){
nameValue=dataString[nv].split("=") // get value at dataString index nv and split at character =
if( (this.type == "text"||this.type == "hidden"||this.type == "password"||this.type=="textarea")&&this.name==nameValue[0]){
this.form.elements[elNum].value=nameValue[1] // and assign value
}
if(this.type == "checkbox" || this.type == "radio"){ // if radio or checkbox
if(this.value==nameValue[1]){ // check against value
this.form.elements[elNum].checked=true // check radio or checkbox
}
}
if (this.type == "select-one"||this.type == "select-multiple"){ // Selection lists
for (optIndex = 0; optIndex< this.form.elements[elNum].options.length; optIndex++){
if (this.form.elements[elNum].options[optIndex].value==nameValue[1]){
this.form.elements[elNum].options[optIndex].selected= true
}
}
}
}
}
}
}
// add onload="getData()" to the opening BODY tag
// -->
</script>
<form name="f1">
<table border="0"><tr valign="top">
<td><BR>
<input type="text" name="t1" value="" size="15"><BR>
<input type="text" name="t2" value="" size="15"><BR>
<input type="password" name="pwd" value="" size="15"><BR>
<input type="hidden" name="hide" value="">
</td>
<td><BR>
1<input type="radio" name="r1" value="radio 1">
2 <input type="radio" name="r1" value="radio 2">
3 <input type="radio" name="r1" value="radio 3">
4 <input type="radio" name="r1" value="radio 4"><BR><BR>
1 <input type="checkbox" name="c1" value="checkbox 1">
2 <input type="checkbox" name="c2" value="checkbox 2">
3 <input type="checkbox" name="c3" value="checkbox 3">
4 <input type="checkbox" name="c4" value="checkbox 4">
</td>
<td>
Single<br>
<select name="s1" size="4" select-one>
<option value="sopt1">Option 1
<option value="sopt2">Option 2
<option value="sopt3">Option 3
<option value="sopt4">Option 4
</select>
</td>
<td>
Multiple<br>
<select name="s2" size="4" multiple>
<option value="mopt1">Option 1
<option value="mopt2">Option 2
<option value="mopt3">Option 3
<option value="mopt4">Option 4
</select>
</td>
<td><BR>
<textarea name="tarea"></textarea>
</td></tr></table>
</form>