Javascript Calculate Pass Value List Menu Selections ASP

I have a form where a person clicks on a checkbox, a list/menu drop-down is enabled, allowing for a selection to be made.  The value of the selection is passed on to a text field.

For example, if a person is attending a party and wants to bring a guest(s), they would click on the checkbox.  The list/menu is enabled and the person can pick up to 4 people.  The value of the number selected is passed on to the text field (cost for person to attend).

The issue I have is that the form has multiple areas where a person can make such a selection.  I want each text box to display only the value for each section if a selection is made.  All text boxes will be totaled at the end of the form.

Right now, if you select both text boxes and make a selection from the list/menu drop down, it totals correctly.  But it does it in the first text box.  I want the value of the number selected to be passed on to the correct text field.
<html>
<head>
<title>Guest Activities</title>
<script>
  function sum(objForm){
    var total = 0;
    for(var i=0; i<objForm.length; i++){
        if(objForm.elements[i].name.indexOf('sel')==0){
          total += (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
        }
      }    
      objForm.txtTotal.value = total;
  }
 
  function toggle(obj){
    var selName = 'sel' + obj.name.split('chk')[1];
    obj.form.elements[selName].disabled = !obj.checked;
      if(!obj.checked){
        obj.form.elements[selName].selectedIndex = 0;
      }
      sum(obj.form);
  }
</script>
</head>
 
<body>
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><form name="form1" method="post" action="">
        <table width="450" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="500"> <table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk1" type="checkbox" class="text-small" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel1" disabled class="text-small" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="45.00">1</option>
                      <option value="90.00">2</option>
                      <option value="135.00">3</option>
                      <option value="180.00">4</option>
                    </select> &nbsp; <font color="#666666">x $45.00</font></td>
                  <td width="230"> <input name="txtTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk2" type="checkbox" class="text-small" id="chk2" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel2" disabled class="text-small" id="sel2" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="25.00">1</option>
                      <option value="50.00">2</option>
                      <option value="75.00">3</option>
                      <option value="100.00">4</option>
                    </select>
                    &nbsp; <font color="#666666">x $25.00</font></td>
                  <td width="230"> <input name="txtTotal2" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
          </tr>
        </table>
      </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

arendt73Asked:
Who is Participating?
 
KuldeepchaturvediCommented:
that was easy..

see the code below..

Note, I have added a ".00" in all totals, it will work as long as your values do not contain any decimal values.. if they do have any decimal values ( i.e. 45.12 or something like that).
then you do not need to append a .00 at the end..
<html>
<head>
<title>Guest Activities</title>
<script>
  function sum(objForm){
    var total = 0;
    for(var i=0; i<objForm.length; i++){
        if(objForm.elements[i].name.indexOf('sel')==0){
          total += (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
//document.getElementByName("txtTotal"+i).value = (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
   
}
      }    
      //objForm.txtTotal.value = total;
          objForm.allTotal.value = total+".00";
  }
 
  function toggle(obj){
    var selName = 'sel' + obj.name.split('chk')[1];
    obj.form.elements[selName].disabled = !obj.checked;
      if(!obj.checked){
        obj.form.elements[selName].selectedIndex = 0;
      }
      sum(obj.form);
  }
  function showVal(obj,sel)
  {
  document.getElementById(obj).value=sel.value;
  }
  function updateVal(obj,sel)
  {
  if(!obj.checked)
  document.getElementById(sel).value='0.00';
  }
</script>
</head>
 
<body>
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><form name="form1" method="post" action="">
        <table width="450" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="500"> <table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk1" type="checkbox" class="text-small" onclick="toggle(this);updateVal(this,'txtTotal1');"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel1" disabled class="text-small" onchange="sum(this.form);showVal('txtTotal1',this);">
                      <option value="0">--select--</option>
                      <option value="45.00">1</option>
                      <option value="90.00">2</option>
                      <option value="135.00">3</option>
                      <option value="180.00">4</option>
                    </select>   <font color="#666666">x $45.00</font></td>
                  <td width="230"> <input name="txtTotal1" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk2" type="checkbox" class="text-small" id="chk2" onclick="toggle(this);updateVal(this,'txtTotal2');"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel2" disabled class="text-small" id="sel2" onchange="sum(this.form);showVal('txtTotal2',this);">
                      <option value="0">--select--</option>
                      <option value="25.00">1</option>
                      <option value="50.00">2</option>
                      <option value="75.00">3</option>
                      <option value="100.00">4</option>
                    </select>   <font color="#666666">x $25.00</font></td>
                  <td width="230"> <input name="txtTotal2" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr>
            <td width="230"> <input name="allTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> </td>
 
          </tr>
        </table>
      </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
KuldeepchaturvediCommented:
you shd be making another field named as "Total" and add your values there..

<td width="230"> <input name="allTotal" type="text" class="text-small" value="0" size="5" maxlength="5">
                  </td>

& in your function you need to change

the last line
objForm.txtTotal.value = total;

to
objForm.allTotal.value = total;
0
 
arendt73Author Commented:
This is very close.  The addition of the Total field is what I need at the bottom.  But the other issue is NOT resolved where I want to display each selection (if one is made) in its own box (under the "If YES check here").   Right now each total box displays 0 and not an amount (if selected).  Below is the updated code.
<html>
<head>
<title>Guest Activities</title>
<script>
  function sum(objForm){
    var total = 0;
    for(var i=0; i<objForm.length; i++){
        if(objForm.elements[i].name.indexOf('sel')==0){
          total += (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
        }
      }    
      //objForm.txtTotal.value = total;
	  objForm.allTotal.value = total;
  }
 
  function toggle(obj){
    var selName = 'sel' + obj.name.split('chk')[1];
    obj.form.elements[selName].disabled = !obj.checked;
      if(!obj.checked){
        obj.form.elements[selName].selectedIndex = 0;
      }
      sum(obj.form);
  }
</script>
</head>
 
<body>
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><form name="form1" method="post" action="">
        <table width="450" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="500"> <table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk1" type="checkbox" class="text-small" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel1" disabled class="text-small" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="45.00">1</option>
                      <option value="90.00">2</option>
                      <option value="135.00">3</option>
                      <option value="180.00">4</option>
                    </select> &nbsp; <font color="#666666">x $45.00</font></td>
                  <td width="230"> <input name="txtTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk2" type="checkbox" class="text-small" id="chk2" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel2" disabled class="text-small" id="sel2" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="25.00">1</option>
                      <option value="50.00">2</option>
                      <option value="75.00">3</option>
                      <option value="100.00">4</option>
                    </select> &nbsp; <font color="#666666">x $25.00</font></td>
                  <td width="230"> <input name="txtTotal2" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td width="230"> <input name="allTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> </td>
 
          </tr>
        </table>
      </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
KuldeepchaturvediCommented:
try the below code..

see that I have changed your input field names to match the loop at the top..
<html>
<head>
<title>Guest Activities</title>
<script>
  function sum(objForm){
    var total = 0;
    for(var i=0; i<objForm.length; i++){
        if(objForm.elements[i].name.indexOf('sel')==0){
          total += (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
document.getElementByName("txtTotal"+i).value = (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
   
}
      }    
      //objForm.txtTotal.value = total;
          objForm.allTotal.value = total;
  }
 
  function toggle(obj){
    var selName = 'sel' + obj.name.split('chk')[1];
    obj.form.elements[selName].disabled = !obj.checked;
      if(!obj.checked){
        obj.form.elements[selName].selectedIndex = 0;
      }
      sum(obj.form);
  }
</script>
</head>
 
<body>
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><form name="form1" method="post" action="">
        <table width="450" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="500"> <table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk1" type="checkbox" class="text-small" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel1" disabled class="text-small" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="45.00">1</option>
                      <option value="90.00">2</option>
                      <option value="135.00">3</option>
                      <option value="180.00">4</option>
                    </select>   <font color="#666666">x $45.00</font></td>
                  <td width="230"> <input name="txtTotal1" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk2" type="checkbox" class="text-small" id="chk2" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel2" disabled class="text-small" id="sel2" onchange="sum(this.form)">
                      <option value="0">--select--</option>
                      <option value="25.00">1</option>
                      <option value="50.00">2</option>
                      <option value="75.00">3</option>
                      <option value="100.00">4</option>
                    </select>   <font color="#666666">x $25.00</font></td>
                  <td width="230"> <input name="txtTotal2" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr>
            <td width="230"> <input name="allTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> </td>
 
          </tr>
        </table>
      </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
arendt73Author Commented:
Nothing is working now.  Below is what I need.  

txtTotal1 should contain the value of sel1 (if checkbox is not selected, should be 0).

txtTotal2 should contain the value of sel2 (if checkbox is not selected, should be 0).

allTotal should equal the sums of txtTotal1 and txtTotal2, regardless if any checkboxes were selected.

Thanks.
0
 
KuldeepchaturvediCommented:
Here try this..
<html>
<head>
<title>Guest Activities</title>
<script>
  function sum(objForm){
    var total = 0;
    for(var i=0; i<objForm.length; i++){
        if(objForm.elements[i].name.indexOf('sel')==0){
          total += (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
//document.getElementByName("txtTotal"+i).value = (objForm.elements[i].options[objForm.elements[i].selectedIndex].value * 1);
   
}
      }    
      //objForm.txtTotal.value = total;
          objForm.allTotal.value = total;
  }
 
  function toggle(obj){
    var selName = 'sel' + obj.name.split('chk')[1];
    obj.form.elements[selName].disabled = !obj.checked;
      if(!obj.checked){
        obj.form.elements[selName].selectedIndex = 0;
      }
      sum(obj.form);
  }
  function showVal(obj,sel)
  {
  document.getElementById(obj).value=sel.value;
  }
</script>
</head>
 
<body>
<table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><form name="form1" method="post" action="">
        <table width="450" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td width="500"> <table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk1" type="checkbox" class="text-small" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel1" disabled class="text-small" onchange="sum(this.form);showVal('txtTotal1',this);">
                      <option value="0">--select--</option>
                      <option value="45.00">1</option>
                      <option value="90.00">2</option>
                      <option value="135.00">3</option>
                      <option value="180.00">4</option>
                    </select>   <font color="#666666">x $45.00</font></td>
                  <td width="230"> <input name="txtTotal1" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225">Will any guests accompany you?</td>
                  <td width="238"> If YES check here 
                    <input name="chk2" type="checkbox" class="text-small" id="chk2" onclick="toggle(this);"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td><table width="450" height="25" border="0" cellpadding="0" cellspacing="0" class="text-small">
                <tr> 
                  <td width="225"> <select name="sel2" disabled class="text-small" id="sel2" onchange="sum(this.form);showVal('txtTotal2',this);">
                      <option value="0">--select--</option>
                      <option value="25.00">1</option>
                      <option value="50.00">2</option>
                      <option value="75.00">3</option>
                      <option value="100.00">4</option>
                    </select>   <font color="#666666">x $25.00</font></td>
                  <td width="230"> <input name="txtTotal2" type="text" class="text-small" value="0" size="5" maxlength="5"> 
                  </td>
                </tr>
              </table></td>
          </tr>
          <tr> 
            <td> </td>
          </tr>
          <tr>
            <td width="230"> <input name="allTotal" type="text" class="text-small" value="0" size="5" maxlength="5"> </td>
 
          </tr>
        </table>
      </form></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
arendt73Author Commented:
That about does what I was looking for.  Now I am pushing my luck, but here it goes.

If I click the checkbox and make a selection, the value computes at the txtTotal and allTotal - perfect!  But if I uncheck a checkbox, the subtotal (txtTotal1 or txtTotal2) remains although the amount is removed from the allTotal.  If a selection is initially made, then is unchecked, how can you remove the amount in txtTotal back to 0?

Lastly, the txtTotal boxes have decimals but the allTotal does not.  I would like to see the allTotal contain decimals.

Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.