Changing form fields in a different frame
If you need to change form fields in one frame based of what a user selectes in another frame, here's a basic example on how to do so, all using plain html and Javascript. There are three files:
1. Frames.html Defines the layout of the frames
2. Left.html Creates a dropdown selection box and the Javascript that is used to populate the Right frame
3. Right.html Creates two text fields that are populated by the Javascript in the left frame
Simply copy-n-paste these files onto your ISP and jump to Frames.html to see it in action or use it as a guide.
Example HTML/CFML code:
Code:
<!--- Frames.html --->
<frameset cols="50%,*">
<frame name="Left" src="Left.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="Right" src="Right.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
<!--- Left.html --->
<html>
<head>
<script language="Javascript1.2">
function PopulateRightForm()
{
// Get the index of the drop-down box
var idx=document.LeftForm.LeftDropdown.selectedIndex;
// Get the value of the selected item of the dropdown box
var n=document.LeftForm.LeftDropdown.options[idx].value;
// Get the text of the selected item of the dropdown box
var t=document.LeftForm.LeftDropdown.options[idx].text;
// Populate the values of the text boxes in the right frame
parent.frames['Right'].document.RightForm.RightText.value=t;
parent.frames['Right'].document.RightForm.RightValue.value=n;
}
</script>
</head>
<body bgcolor="FFFFFF">
<form name="LeftForm">
Select a number:
<select name="LeftDropdown" size="1" onChange="PopulateRightForm()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</form>
</body>
</html>
<!--- Right.html --->
<html>
<body bgcolor="FFFFFF">
<form name="RightForm">
Text passed from left form: <input type="Text" name="RightText"><br>
Value passed from left form: <input type="Text" name="RightValue">
</form>
</body>
</html>