Link to home
Start Free TrialLog in
Avatar of arendt73
arendt73

asked on

Javascript select list/menu populates textfield & enable hidden list/menu and text field - Part II

Thanks to x com, fsze88 and CConqdon for a majority of the code below.

What I am trying to accomplish:
1. The update values for Total1,2, & 3 is multiplied by 25.  What happens if I want to make Total2 value to be multiplied by 10 or Total3 to be multiplied by 5?  Total1's value should remain multiplied by 25.
2.  The Status area (members/non-members) works correctly, but I would like to remove the "Members pay $100.00" or "Non-Members pay $150.00" display when a selection is made.  The Textfield (textfield) will remain with the total.
3. I would like to have a Grand Total textfield (allTotal) add up all the textfields amounts.
<html>
<head>
<script language="javascript" type="text/javascript">
function toggleDisplay (caller) {
    var tabIndex = 0;
    var frm = caller.form;
    tabIndex = (caller.getAttribute('checkboxtab'));
    if (caller.checked == false) {
        eval("frm.Select" + tabIndex + ".style.visibility = 'hidden'");
        eval("frm.Total" + tabIndex + ".style.visibility = 'hidden'");
    }
    else {
        eval("frm.Select" + tabIndex + ".selectedIndex = 0");
        eval("frm.Select" + tabIndex + ".style.visibility = 'visible'");
        eval("frm.Total" + tabIndex + ".value = '0.00'");
        eval("frm.Total" + tabIndex + ".style.visibility = 'visible'");
    }
}
 
function updateValue (caller) {
    var frm = caller.form;
    selectIndex = (caller.getAttribute('selecttab'));
    eval("frm.Total" + selectIndex + ".value = (caller.value * 25) + '.00'");
}
</script>
 
<script>
function toggleOpt(){
  var obj=arguments[0];
  var strDisplay='0';
  var obj1=document.getElementById('spn1');
  var obj2=document.getElementById('spn2');
  var objVal=document.getElementById('textfield');
 
  if(obj.selectedIndex>0){
     if(obj.options[obj.selectedIndex].value=='Member'){
       obj1.style.display='block';
       obj2.style.display='none';
       strDisplay='$100.00';
    }else{
     obj1.style.display='none';
     obj2.style.display='block';
     strDisplay='$150.00';
    }
  }else{
     obj1.style.display='none';
     obj2.style.display='none';
  }
 
  objVal.value=strDisplay;
}
</script>
  
</head>
<body>
<form>
  <div>
    <p>Click here to enable
      <input name="chk1" type="checkbox" id="chk1" checkboxtab="1" onclick="toggleDisplay(this)">
      <select name="Select1" onchange="updateValue(this)" selecttab="1" style="visibility:hidden;">
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input name="Total1" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
    </p>
    <p>Click here to enable 
      <input name="chk2" type="checkbox" id="chk2" checkboxtab="2" onclick="toggleDisplay(this)">
      <select name="Select2" onchange="updateValue(this)" selecttab="2" style="visibility:hidden;">
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input name="Total2" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
    </p>
    <p>Click here to enable 
      <input name="chk3" type="checkbox" id="chk3" checkboxtab="3" onclick="toggleDisplay(this)">
      <select name="Select3" onchange="updateValue(this)" selecttab="3" style="visibility:hidden;">
        <option value="0">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input name="Total3" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
    </p>
    <p> Status: 
      <select name="status" id="status" onchange="toggleOpt(this);">
        <option>select</option>
        <option value="Member">Member</option>
        <option value="Non-Member">Non-Member</option>
      </select>
      <input name="textfield" id="textfield" type="text" size="5" maxlength="5">
    </p>
    <p> Grand Total 
      <input name="allTotal" type="text" id="allTotal" value="0.00" size="6" maxlength="6" readonly="readonly">
    </p>
    <p> <span id="spn1" style="display:none">Members pay $100.00</span> <span id="spn2" style="display:none">Non-Members 
      pay $150.00</span></p>
    </div></form>
 </p></body>
</html>

Open in new window

Avatar of Member_2_3718378
Member_2_3718378

Give this a shot.
<html>
	<head>
		<script language="javascript" type="text/javascript">
		function toggleDisplay (caller) {
			var tabIndex = 0;
			var frm = caller.form;
			tabIndex = (caller.getAttribute('checkboxtab'));
 
			if (caller.checked == false) {
				eval("frm.Select" + tabIndex + ".style.visibility = 'hidden'");
				eval("frm.Total" + tabIndex + ".style.visibility = 'hidden'");
			} else {
				eval("frm.Select" + tabIndex + ".selectedIndex = 0");
				eval("frm.Select" + tabIndex + ".style.visibility = 'visible'");
				eval("frm.Total" + tabIndex + ".value = '0.00'");
				eval("frm.Total" + tabIndex + ".style.visibility = 'visible'");
			}
		}
		 
		// Pass the multiplier (e.g. 25, 10, 5) you want to use as a parameter.
		function updateValue(caller, multiplier) {
			if (!isNaN(multiplier)){
				var frm = caller.form;
				selectIndex = (caller.getAttribute('selecttab'));
				eval("frm.Total" + selectIndex + ".value = (caller.value * " + multiplier + ") + '.00'");
			
				recalculateGrandTotal();
			}
		}
 
		function recalculateGrandTotal() {
			var dblGrandTotal = 0.00;
 
			// Get the total of the three line items.
			for (var i=1; i<4; i++){
				dblGrandTotal += parseFloat(document.frmYourForm.elements['Total'+ i].value);
			}
			
			// Add the membership fee.
			dblGrandTotal += parseFloat(document.frmYourForm.MembershipFee.value);
 
			// Update the value of the shown, recalculated grand total.
			document.frmYourForm.allTotal.value = dblGrandTotal;
		}
		</script>
 
		<script>
		function toggleOpt(){
			var obj=arguments[0];
			var dblValue = 0.00;
			var strDisplay='0';
			var obj1=document.getElementById('spn1');
			var obj2=document.getElementById('spn2');
			var objVal=document.getElementById('textfield');
 
			if(obj.selectedIndex>0){
				if(obj.options[obj.selectedIndex].value=='Member'){
					//obj1.style.display='block';
					//obj2.style.display='none';
					strDisplay='$100.00';
					dblValue = 100.00;
				}else{
					//obj1.style.display='none';
					//obj2.style.display='block';
					strDisplay='$150.00';
					dblValue = 150.00;
				}
			}else{
				//obj1.style.display='none';
				//obj2.style.display='none';
			}
 
			objVal.value=strDisplay;
 
			if (dblValue > 0) {
				document.frmYourForm.MembershipFee.value = dblValue;
				recalculateGrandTotal();
			}
		}
		</script>
	</head>
	<body>
		<form name="frmYourForm" action="">
			<div>
				<p>Click here to enable
					<input name="chk1" type="checkbox" id="chk1" checkboxtab="1" onclick="toggleDisplay(this)">
					<select name="Select1" onchange="updateValue(this, 25)" selecttab="1" style="visibility:hidden;">
						<option value="0">Select</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					<input name="Total1" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
				</p>
				<p>Click here to enable 
					<input name="chk2" type="checkbox" id="chk2" checkboxtab="2" onclick="toggleDisplay(this)">
					<select name="Select2" onchange="updateValue(this, 10)" selecttab="2" style="visibility:hidden;">
						<option value="0">Select</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					<input name="Total2" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
				</p>
				<p>Click here to enable 
					<input name="chk3" type="checkbox" id="chk3" checkboxtab="3" onclick="toggleDisplay(this)">
					<select name="Select3" onchange="updateValue(this, 5)" selecttab="3" style="visibility:hidden;">
						<option value="0">Select</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
					<input name="Total3" type=text size="5" maxlength="5" readonly="readonly" value="0.00" style="visibility:hidden;">
				</p>
				<p> Status: 
					<select name="status" id="status" onchange="toggleOpt(this);">
						<option>select</option>
						<option value="Member">Member</option>
						<option value="Non-Member">Non-Member</option>
					</select>
					<input name="textfield" id="textfield" type="text" size="5" maxlength="5">
					<input name="MembershipFee" type="hidden" value="">
				</p>
				<p> Grand Total 
					<input name="allTotal" type="text" id="allTotal" value="0.00" size="6" maxlength="6" readonly="readonly">
				</p>
				<p>
					<span id="spn1" style="display:none">Members pay $100.00</span> 
					<span id="spn2" style="display:none">Non-Members pay $150.00</span>
				</p>
			</div>
		</form>
	</body>
</html>

Open in new window

Avatar of arendt73

ASKER

Very close.  If I click and make a selection in Select1, the grand total (allTotal) displays NaN.  The correct grand total appears in allTotal for the selections I made only after I select a Status.  Is there a way that when a selection is made from either Select1,2,or 3, that the allTotal box displays the values from each of the selections?  allTotal will continue adding/calculating the selections made.
Also, the allTotal area should have a decinal and two zeros (cents area).  Ex: 125.00, not 125 as it is currently.

Thank you.
Lastly, the grand total (allTotal) area should reflect the correct amount if an item is selected, then de-selected.  The allTotal should always update automatically with the correct amount shown.

Again, thank you.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_3718378
Member_2_3718378

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial