Help with onChange and Form

**writhe** · Jan 2, 2002, 13:12

Hey everybody-

I'm trying to design a bracket for our office to use for the NCAA tournament this March. I'll have drop down menus for the user to choose the winner of each game and I'd like for the drop downs to change dynamically, based on what has previously been selected. Ideally, this code below will change the third drop down menu to contain the values of the first and second fields. Can someone help me out with this?

Code:

<HEAD>
<TITLE>pick test</TITLE>

<script language="JavaScript">
<!--
function onChange() {
	var Current1 = document.picks.game1.selectedIndex;
	var Current2 = document.picks.game2.selectedIndex;
	document.picks.game3.value = document.picks.game1.options[Current1].text;
}
//-->
</script>

</HEAD>
<BODY>

<form name="picks" action="showpicks.asp" method="post" onSubmit="return false;">
<SELECT name="game1" onChange="onChange()">
	<OPTION value="Duke">Duke</OPTION>
	<OPTION value="St. Bonaventure">St. Bonaventure</OPTION>
</SELECT>
<br>
<SELECT name="game2">
	<OPTION value="Florida">Florida</OPTION>
	<OPTION value="Temple">Temple</OPTION>
</SELECT>
<br>
<SELECT name="game3">
	<OPTION value=""></OPTION>
	<OPTION value=""></OPTION>
</SELECT>
<br>
<INPUT type="submit" value="Submit">
</form>

**writhe** · Jan 2, 2002, 16:11

Here's what I've got so far (and it works). My only problem is, I need the values of the third drop down to be changed, too. Any ideas?

Code:

<HEAD>
<TITLE>pick test</TITLE>

<script language="JavaScript">
<!--
function onChange() {
	var Current1 = document.picks.game1.selectedIndex;
	var Current2 = document.picks.game2.selectedIndex;
	document.picks.game3.options[0].text = document.picks.game1.options[Current1].text;
	document.picks.game3.options[1].text = document.picks.game2.options[Current2].text;
}
//-->
</script>

</HEAD>
<BODY>

<form name="picks" action="showpicks.asp" method="post">
<br>
<SELECT name="game1" onChange="onChange()">
	<OPTION value="Duke">Duke</OPTION>
	<OPTION value="St. Bonaventure">St. Bonaventure</OPTION>
</SELECT>
<br><br>
<SELECT name="game2" onChange="onChange()">
	<OPTION value="Florida">Florida</OPTION>
	<OPTION value="Temple">Temple</OPTION>
</SELECT>
<br><br>
<SELECT name="game3">
	<OPTION value=""></OPTION>
	<OPTION value=""></OPTION>
</SELECT>
<br><br>
<INPUT type="submit" value="Submit">
</form>

**Vincent Puglia** · Jan 2, 2002, 17:03

Hi,

I'm going to presume your asp is saving this somewhere.

If interested in how it works, see the selection list script/tutorials at my site (GrassBlade)

Vinny

function onChange(selVal, selName) {
num = (parseInt(selName.substr(4)))
num += (num %2 == 0) ? 1 : 2;
nextSel = 'game' + num
selObj = eval('document.picks.' + nextSel)

selObj.options[selObj.options.length] = new Option(selVal, selVal);

}
//-->
</script>

</HEAD>
<BODY>

<form name="picks" action="showpicks.asp" method="post">
<br>
<SELECT name="game1" onChange="onChange(this.options[this.selectedIndex].value, this.name)">
<OPTION value="Duke">Duke</OPTION>
<OPTION value="St. Bonaventure">St. Bonaventure</OPTION>
</SELECT>
<br><br>
<SELECT name="game2" onChange="onChange(this.options[this.selectedIndex].value, this.name)">
<OPTION value="Florida">Florida</OPTION>
<OPTION value="Temple">Temple</OPTION>
</SELECT>
<br><br>
<SELECT name="game3">
</SELECT>

The SitePoint Forums have moved.

User Tag List

Thread: Help with onChange and Form

Thread Tools

Display

Help with onChange and Form

got it working a little

Bookmarks

Bookmarks

Posting Permissions