You are here: irt.org | FAQ | JavaScript | Form | 10.2 | Q23 [ previous next ]
In this example there are two forms within the same document called formName1 and formName2. Within formName1 there is a drop down select list called selectName1 and within formName2 there are two text box fields called textboxName1 and textboxName2
There are various events we could utilise to pass the value or text from the selected option to the text box, e.g. onClick, onChange, onFocus, onBlur and onClick.
In this example I shall use the onChange event to trigger the setForm2Value() function which will change the value of the two text boxes to the value and text of the selected option:
<script language="JavaScript"><!--
function setForm2Value() {
var selectedItem = document.formName1.selectName1.selectedIndex;
var selectedItemValue = document.formName1.selectName1.options[selectedItem].value;
var selectedItemText = document.formName1.selectName1.options[selectedItem].text;
if (selectedItem != 0) {
document.formName2.textboxName1.value = selectedItemText;
document.formName2.textboxName2.value = selectedItemValue;
}
else {
document.formName2.textboxName1.value = "";
document.formName2.textboxName2.value = "";
}
}
//--></script>
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Select one:
<option value="ill">Doc
<option value="miserable">Happy
<option value="cheerful">Grumpy
<option value="wide awake">Sleepy
<option value="smart">Dopey
<option value="boastful">Bashful
<option value="breathing">Sneezy
</select>
</form>
<p>
<form name="formName2">
<input type="textbox" name="textboxName1" value="" size="10">
is
<input type="textbox" name="textboxName2" value="" size="10">
</form>