Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of arendt73
arendt73 asked on
JavaScriptASPHTML
5 Comments1 Solution681 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Avatar of Member_2_3718378
Member_2_3718378

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers