Multiple Elements

Intro
Passing Data
Name & Value
Muliple Elements
Variable & Value
 
Data to Popup
Data from Popup
Opener
Arrays
Form Method
 






1 2 3 4

1 2 3 4
Single
Multiple


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>
In page2.htm

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