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:
<!--- 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>
Return to the Cold Fusion Tips-N-Tricks topic list