Two Select Boxes - Auto Balancing to 100%

[firepwr]

I've got two drop down boxes that are going to be used to select the percentage a person is designated to two different categories. I'd like them to "auto-balance" whenever one of the two is selected.

Example #1: Someone selects 30% on the left side and the right side automatically changes to 70%.

Example #2: The left & right sides show 40% & 60% respectively. Someone selects the "blank" option on the right side and the left side automatically changes to the "blank" option.

Basically I want them to either BOTH be "blank" or BOTH add up to exactly 100%.

I've tried a couple of different things with "onclick" but I can't figure out how to get it to do the calculation. Does anyone have any examples of something like this that I could look at?

Here's a sample of what I'm talking about in HTML:

<table>
<tr><td>MS %</td><td>Leg %</td></tr>
<tr>
	<td align="Center"><SELECT NAME="MS_Percent"><OPTION VALUE=" ">
		<OPTION VALUE="10" >10</option>
		<OPTION VALUE="20" >20</option>
		<OPTION VALUE="30" >30</option>
		<OPTION VALUE="40" >40</option>
		<OPTION VALUE="50" >50</option>
		<OPTION VALUE="60" >60</option>
		<OPTION VALUE="70" >70</option>
		<OPTION VALUE="80" >80</option>
		<OPTION VALUE="90" >90</option>
		<OPTION VALUE="100" >100</option>
	</select></td>
	<td align="Center"><SELECT NAME="Legacy_Percent"><OPTION VALUE=" ">
		<OPTION VALUE="10" >10</option>
		<OPTION VALUE="20" >20</option>
		<OPTION VALUE="30" >30</option>
		<OPTION VALUE="40" >40</option>
		<OPTION VALUE="50" >50</option>
		<OPTION VALUE="60" >60</option>
		<OPTION VALUE="70" >70</option>
		<OPTION VALUE="80" >80</option>
		<OPTION VALUE="90" >90</option>
		<OPTION VALUE="100" >100</option>
	</select></td>
</tr></table>

 

[bdichiara]

You'll need to assign each of your selects an ID:

<SELECT NAME="MS_Percent" id="MS_Percent" onChange="balance('MS_Percent');">
	<OPTION VALUE=" "> </OPTION>
	<OPTION VALUE="0">0</OPTION>
	<OPTION VALUE="10" >10</option>
	<OPTION VALUE="20" >20</option>
	<OPTION VALUE="30" >30</option>
	<OPTION VALUE="40" >40</option>
	<OPTION VALUE="50" >50</option>
	<OPTION VALUE="60" >60</option>
	<OPTION VALUE="70" >70</option>
	<OPTION VALUE="80" >80</option>
	<OPTION VALUE="90" >90</option>
	<OPTION VALUE="100" >100</option>
</select><br>
<br>
<SELECT NAME="Legacy_Percent" id="Legacy_Percent" onChange="balance('Legacy_Percent');">
	<OPTION VALUE=" "> </OPTION>
	<OPTION VALUE="0">0</OPTION>
	<OPTION VALUE="10" >10</option>
	<OPTION VALUE="20" >20</option>
	<OPTION VALUE="30" >30</option>
	<OPTION VALUE="40" >40</option>
	<OPTION VALUE="50" >50</option>
	<OPTION VALUE="60" >60</option>
	<OPTION VALUE="70" >70</option>
	<OPTION VALUE="80" >80</option>
	<OPTION VALUE="90" >90</option>
	<OPTION VALUE="100" >100</option>
</select>

Then here's the function that will balance them:

function balance(id){
	if(id == "MS_Percent"){
		firstval = document.getElementById("MS_Percent").value;
		document.getElementById("Legacy_Percent").value = 100 - firstval;
	} else {
		firstval = document.getElementById("Legacy_Percent").value;
		document.getElementById("MS_Percent").value = 100 - firstval;
	}
}

_______________
_brian.

 

[bdichiara]

I forgot you wanted them both to be blank. change the function to this:

function balance(id){
  if(id == "MS_Percent"){
    firstval = document.getElementById("MS_Percent").value;
    if(firstval == " " && firstval != ""){
      document.getElementById("Legacy_Percent").value = " ";
    } else {
      document.getElementById("Legacy_Percent").value = 100 - firstval;
    }
  } else {
    firstval = document.getElementById("Legacy_Percent").value;
    if(firstval == " " && firstval != ""){
      document.getElementById("Legacy_Percent").value = " ";
    } else {
      document.getElementById("MS_Percent").value = 100 - firstval;
    }
  }
}

_______________
_brian.

 

[bdichiara]

oops one little error on this line:

function balance(id){
  if(id == "MS_Percent"){
    firstval = document.getElementById("MS_Percent").value;
    if(firstval == " " && firstval != ""){
      document.getElementById("Legacy_Percent").value = " ";
    } else {
      document.getElementById("Legacy_Percent").value = 100 - firstval;
    }
  } else {
    firstval = document.getElementById("Legacy_Percent").value;
    if(firstval == " " && firstval != ""){
      [b]document.getElementById("MS_Percent").value = " ";[/b]
    } else {
      document.getElementById("MS_Percent").value = 100 - firstval;
    }
  }
}

_______________
_brian.

 

[firepwr]

You are AWESOME---Thank You!

Here's the complete working example code for anyone else:

<html><head>

<SCRIPT LANGUAGE="JavaScript">
<!--
function balance(id){
  if(id == "MS_Percent"){
    firstval = document.getElementById("MS_Percent").value;
    if(firstval == " " && firstval != ""){
      document.getElementById("Legacy_Percent").value = " ";
    } else {
      document.getElementById("Legacy_Percent").value = 100 - firstval;
    }
  } else {
    firstval = document.getElementById("Legacy_Percent").value;
    if(firstval == " " && firstval != ""){
      document.getElementById("MS_Percent").value = " ";
    } else {
      document.getElementById("MS_Percent").value = 100 - firstval;
    }
  }
}
// End hiding -->
</SCRIPT>

</head><body>

<table>
<tr><td>MS %</td><td>Leg %</td></tr>
<tr>
	<td align="Center"><SELECT NAME="MS_Percent" id="MS_Percent" onChange="balance('MS_Percent');">
		<OPTION VALUE=" "> </option>
		<OPTION VALUE="0" >0</option>
		<OPTION VALUE="10" >10</option>
		<OPTION VALUE="20" >20</option>
		<OPTION VALUE="30" >30</option>
		<OPTION VALUE="40" >40</option>
		<OPTION VALUE="50" >50</option>
		<OPTION VALUE="60" >60</option>
		<OPTION VALUE="70" >70</option>
		<OPTION VALUE="80" >80</option>
		<OPTION VALUE="90" >90</option>
		<OPTION VALUE="100" >100</option>
	</select></td>
	<td align="Center"><SELECT NAME="Legacy_Percent" id="Legacy_Percent" onChange="balance('Legacy_Percent');">
		<OPTION VALUE=" "> </option>
		<OPTION VALUE="0" >0</option>
		<OPTION VALUE="10" >10</option>
		<OPTION VALUE="20" >20</option>
		<OPTION VALUE="30" >30</option>
		<OPTION VALUE="40" >40</option>
		<OPTION VALUE="50" >50</option>
		<OPTION VALUE="60" >60</option>
		<OPTION VALUE="70" >70</option>
		<OPTION VALUE="80" >80</option>
		<OPTION VALUE="90" >90</option>
		<OPTION VALUE="100" >100</option>
	</select></td>
</tr></table>