423,682 Members | 1,622 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,682 IT Pros & Developers. It's quick & easy.

Loop with a series of checkbox and dropdown box

P: 2
Hi, I just starting learning javascripe by myself and have quick question if anyone can help. I already checked recent post and couldn't find any similar one.

I have a few pairs of checkbox and dropdown box, ck1 & db1, ck2 & db2, ck3 & ck3 which match each other on the web page.

What I want to do is once I click the calculate button, first it will check if the checkbox is selected, then it will add the vaule of dropdown box to a sum. After all, display the sum in alert box.

I have two questions: 1)the part of document.frm.ck[i] seems doesn't work. 2) can you set the vaule of dropdown box to an integer, or you have to use math function to convert it for later calculation.

Any help is greatly appreciated, thank you.

Here is the code which I'm trying to fix
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3. function calculate()
  4. {
  5.     var total;
  6.     for(var i=1, i<=3, i++)
  7.     {
  8.         if(document.frm.ck[i].checked = true)
  9.         total = total + document.frm.db[i].value;
  10.     }
  11.  
  12.         alert(total);
  13. }
  14. //-->
  15. </script>
  16.  
  17. <form name="frm">
  18. . . . . . . . .
  19.  
Nov 27 '06 #1
Share this Question
Share on Google+
6 Replies


snowdonkey
P: 37
Hey. Here a some things I noticed in the script you posted:

1) Variable total should be set to a value of 0, or else it's "undefined"

2) The declarations in the for loop should be separated with semicolons, not commas

3) Two equal signs should be used to see if a checkbox is checked

4) You should use the eval() to convert the dropdown value from a string to a number

Here's a working model with comments:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <title>Untitled Document</title>
  8. <script type="text/javascript">
  9. <!--
  10. function calculate()
  11. {
  12.     // store the checkboxes in an array
  13.     var checkboxes = document.getElementsByName("ck"); 
  14.  
  15.     // store the dropdowns in an array
  16.     var dropdowns = document.getElementsByName("db"); 
  17.  
  18.     // set a value to the total, or else it's "undefined"
  19.     var total = 0; 
  20.  
  21.     // loop through the checkboxes sequentially using semicolon to separate declarations
  22.     for(var i = 0; i < checkboxes.length; i++) 
  23.     {
  24.         // use two equal signs to test if particular checkbox is checked
  25.         if(checkboxes[i].checked == true)
  26.         {
  27.             // use eval() to make dropdown value a number instead of a string
  28.             // accumulate sum to total
  29.             total = total + eval(dropdowns[i].value);
  30.         }
  31.     }
  32.  
  33.         alert(total);
  34. }
  35. //-->
  36. </script>
  37. </head>
  38.  
  39. <body>
  40. <form name="frm">
  41. <div>
  42. Checkbox 1: <input type="checkbox" name="ck" />
  43. <select name="db">
  44. <option value="1">1
  45. <option value="2">2
  46. <option value="3">3
  47. </select>
  48. <br />
  49.  
  50. Checkbox 2: <input type="checkbox" name="ck" />
  51. <select name="db">
  52. <option value="1">1
  53. <option value="2">2
  54. <option value="3">3
  55. </select>
  56. <br />
  57.  
  58. Checkbox 3: <input type="checkbox" name="ck"  />
  59. <select name="db">
  60. <option value="1">1
  61. <option value="2">2
  62. <option value="3">3
  63. </select>
  64. <br />
  65. <br />
  66.  
  67. <input type="button" value="Submit" onclick="calculate()" />
  68. </div>
  69. </form>
  70. </body>
  71. </html>
  72.  
Hope this helps.
Nov 27 '06 #2

P: 2
Yep, now my code works :D
Thank you very much!!
Nov 27 '06 #3

P: 2
I have a similar situation but different requirement. I have a list of dropdowns dynamically created in my for loop in JSP code. Now I need the name of dropdown on onClick[is that right choice?] so that I can play around with dojo APIs with dijit.byId(name). I tried by same logic
var dropdowns = document.getElementsByName("db"); and then messed up with errors getting function/variable not defined. Can you please post snippet after the array declaration.Thank you.
Feb 4 '09 #4

acoder
Expert Mod 15k+
P: 16,027
Post your code, so that we can offer suggestions.

Oh, and welcome to Bytes!
Feb 5 '09 #5

P: 2
Here is my code snippet:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function getDataForCenterStore(selectedValue){
  3. var secondStore = new dojo.data.ItemFileReadStore({ url: "<%=servletPath%>?selectedArea="+selectedValue});
  4.  
  5. dijit.byId("*****What should I give here*****).store =     
  6. //////
  7.  
  8. }
  9.  </script>
  10. ///========================jsp============================
  11. <%
  12.         for(int i=0;i<l.size();i++){
  13.         %>
  14.         <tr>
  15.           <input type="hidden" name="id" value="<%=i%>" />
  16.          <% UserDTO user = (UserDTO) users.get(i);
  17.  
  18.           String eno = user.getid();%>
  19.           <input type="hidden" name="eno<%=i%>" value="<%=nuid%>" />
  20.           <td><%=user.getName()%></td>
  21.  
  22.           <td><div align="right">Area<br />
  23.               Center<br />
  24.               Location</div></td>
  25.           <td><div class="tundra">
  26.                <input dojoType="dijit.form.FilteringSelect"
  27.                 store="firstStore"
  28.                 name="firstStore<%=i%>"
  29.                 searchAttr="area"                           
  30.                 onChange="getDataForSecondStore"
  31.  
  32.                 id="areaid<%=i%>"
  33.                 />          </div>
  34.  
  35. <div class="tundra">
  36.               <input dojoType="dijit.form.FilteringSelect"
  37.               store="secondStore"
  38.               name="secondStore<%=i%>"
  39.                 searchAttr="center"              
  40.                 onChange="getDataForThirdStore"
  41.  
  42.                 id="centerid<%=i%>"
  43.                 />            </div>
  44.             <div class="tundra">
  45.                  <input dojoType="dijit.form.FilteringSelect"
  46.               store="thirdStore"
  47.               name="thirdStore<%=i%>"
  48.                 searchAttr="location"              
  49.                 id="locationid<%=i%>"
  50.                 /> </div>
  51.              </td>
  52.         </tr>
  53.         <%}%>
Feb 5 '09 #6

acoder
Expert Mod 15k+
P: 16,027
You could pass the ID to the function that's called onchange, or use this to refer to the element.
Feb 7 '09 #7

Post your reply

Sign in to post your reply or Sign up for a free account.