onChange event >> Pick the Winner

**jdubwelch** · 04-07-2005, 04:37 PM

Next year for March Madness (NCAA Tournament) I want it easier for users to submit their brackets. I want to use the onChange handle but I don't know the best way to do it. For example:

SELECT1 (either Team1 or Team2)

SELECT2 (either Team3 or Team4)

SELECT3 (SELECT1 OR SELECT2)

Doest that make sense? You can choose either team1 or team2 to win the game. Whichever team you choose goes to the next round and is put into the SELECT3. The same goes for the winner of Team3 vs. Team4.

This is just a small example though, the NCAA tournament has 64 teams, which means there are 32 games in the first round, 16 in the next, then 8, 4, 2 and finally 1.

How would I code that? If you could do it for 8 teams (a mini 4 game tournament) I could probably take it and mulitply it for the 64 teams.

**Phaedrus** · 04-07-2005, 08:00 PM

HTML Code:

<html>
<head>
<title>Test</title>
<script language="javascript">
function addWinner(objSel, target)
{
	target = document.getElementById(target);
	
	// If it's the --- option then delete it, 
	// add the new option and exit the function
	if (target.options[0].value == "-")
	{
		target.options[0] = null;
		
		for (i=0;i<objSel.options.length;i++)
		{
			if (objSel.options[i].selected == true)
			{
				newText = objSel.options[i].text;
				newVal = objSel.options[i].value;
				
				target.options[0] = new Option(newText, newVal);
				break;
			}
		}
		
		return;
	}
	
	// Determine which option is selected
	for (i=0;i<objSel.options.length;i++)
	{
		if (objSel.options[i].selected == true)
		{
			var newText = objSel.options[i].text;
			var newVal = objSel.options[i].value;
			break;
		}
	}

	// Now determine which select its coming from and 
	// either delete or add accordingly
	for (i=0;i<objSel.options.length;i++)
	{
		for (j=0;j<target.options.length;j++)
		{
			if (objSel.options[i].value == target.options[j].value)
			{
				var match = true;
				oldOpt = j;
				break;	
			}
		}
	}
	
	if (match)
	{
		// Replace the old value with the new one
		target.options[oldOpt].value = newVal;
		target.options[oldOpt].text = newText;
	}
	else
	{
		// Append the new value
		target.options[target.options.length] = new Option(newText, newVal);
	}
}

</script>
</head>
<body style="font:10pt verdana;">

<h2>Four-game tournament</h2> <hr />

<table border="0" cellpadding="10">
<tr>
	<td>
	
		<table border="0">
		<tr>
			<td>
				<select id="R1G1" onchange="addWinner(this, 'R2G1');">
					<option value="Gonzaga">Gonzaga</option>
					<option value="Maryland">Maryland</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="R1G2" onchange="addWinner(this, 'R2G1');">
					<option value="Duke">Duke</option>
					<option value="North Carolina">North Carolina</option>
				</select>
			</td>
		</tr>
		<tr>
			<td height="20">
				&nbsp;
			</td>
		</tr>
		<tr>
			<td>
				<select id="R1G3" onchange="addWinner(this, 'R2G2');">
					<option value="Illinois">Illinois</option>
					<option value="West Virginia">West Virginia</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="R1G4" onchange="addWinner(this, 'R2G2');">
					<option value="Stanford">Stanford</option>
					<option value="Pacific">Pacific</option>
				</select>
			</td>
		</tr>
		</table>
		
	</td>
	<td>
		<table border="0">
		<tr>
			<td>
				<select id="R2G1" onchange="addWinner(this, 'Finals');">
					<option value="-">-----------</option>
				</select>
			</td>
		</tr>
		<tr>
			<td height="20">
				&nbsp;
			</td>
		</tr>
		<tr>
			<td>
				<select id="R2G2" onchange="addWinner(this, 'Finals');">
					<option value="-">-----------</option>
				</select>
			</td>
		</tr>
		</table>
	</td>
	<td>
		<table border="0">
		<tr>
			<td>
				<select id="Finals">
					<option value="-">-----------</option>
				</select>
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>


</body>
</html>

**jdubwelch** · 04-12-2005, 03:12 PM

Thanks! Your the best!

**Phaedrus** · 04-12-2005, 03:15 PM

Cool, no problem- that one works, but it has a couple of small bugs... I'll fix it and then post up the new code a little later.

**Phaedrus** · 04-12-2005, 04:32 PM

Here, this one doesn't have the bugs:

HTML Code:

<html>
<head>
<title>Test</title>
<script language="javascript">
function clean(objSel)
{
	for(i=0;i<objSel.options.length;i++)
	{
		objSel.options[i] = null;
	}
	objSel.options[0] = new Option("-----------","-");
}
function addWinner(objSel, target)
{	
	target = document.getElementById(target);
	
	// If it is the --- option then delete it, 
	// add the new option and exit the function
	if (target.options[0].value == "-")
	{
		target.options[0] = null;
		
		for (i=0;i<objSel.options.length;i++)
		{
			if (objSel.options[i].selected == true)
			{
				newText = objSel.options[i].text;
				newVal = objSel.options[i].value;
				
				target.options[0] = new Option(newText, newVal);
				break;
			}
		}
		
		return;
	}
	
	// Determine which option is selected
	for (i=0;i<objSel.options.length;i++)
	{
		if (objSel.options[i].selected == true)
		{
			var newText = objSel.options[i].text;
			var newVal = objSel.options[i].value;
			break;
		}
	}

	// Now determine which select its coming from and 
	// either delete or add accordingly
	for (i=0;i<objSel.options.length;i++)
	{
		for (j=0;j<target.options.length;j++)
		{
			if (objSel.options[i].value == target.options[j].value)
			{
				var match = true;
				oldOpt = j;
				break;	
			}
		}
	}
	
	if (match)
	{
		// Replace the old value with the new one
		target.options[oldOpt].value = newVal;
		target.options[oldOpt].text = newText;
	}
	else
	{
		// Append the new value
		target.options[target.options.length] = new Option(newText, newVal);
	}
}
</script>
<style>
body {font:10pt Trebuchet MS, Verdana, Arial, Sans-serif; }
</style>
</head>
<body>

<div style="position:absolute;top:10;left:10;">
	Gonzaga <br /> Maryland <br />
	
	<select id="R1G1" onchange="clean(document.getElementById('Finals'));addWinner(this, 'R2G1');">
		<option value="Gonzaga">Gonzaga</option>
		<option value="Maryland">Maryland</option>
	</select>
</div>
<div style="position:absolute;top:80;left:10;">
	Duke <br /> North Carolina <br />
	
	<select id="R1G2" onchange="clean(document.getElementById('Finals'));addWinner(this, 'R2G1');">
		<option value="Duke">Duke</option>
		<option value="North Carolina">North Carolina</option>
	</select>
</div>
<div style="position:absolute;top:150;left:10;">
	Illinois <br /> West Virginia <br />
	
	<select id="R1G3" onchange="clean(document.getElementById('Finals'));addWinner(this, 'R2G2');">
		<option value="Illinois">Illinois</option>
		<option value="West Virginia">West Virginia</option>
	</select>
</div>
<div style="position:absolute;top:220;left:10;">
	Stanford <br /> Pacific <br />
	
	<select id="R1G4" onchange="clean(document.getElementById('Finals'));addWinner(this, 'R2G2');">
		<option value="Stanford">Stanford</option>
		<option value="Pacific">Pacific</option>
	</select>
</div>
				
<div style="position:absolute;top:80;left:200;">
	<select id="R2G1" onchange="addWinner(this, 'Finals');">
		<option value="-">-----------</option>
	</select>
</div>		
<div style="position:absolute;top:220;left:200;">
	<select id="R2G2" onchange="addWinner(this, 'Finals');">
		<option value="-">-----------</option>
	</select>
</div>	
			
<div style="position:absolute;top:150;left:300;">
	<select id="Finals">
		<option value="-">-----------</option>
	</select>
</div>	
			


</body>
</html>