Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 394
  • Last Modified:

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

0
arendt73
Asked:
arendt73
  • 4
  • 3
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now