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.
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>
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.
ASKER
Also, the allTotal area should have a decinal and two zeros (cents area). Ex: 125.00, not 125 as it is currently.
Thank you.
Thank you.
ASKER
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.
Again, thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window