By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,117 Members | 2,093 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,117 IT Pros & Developers. It's quick & easy.

Adding values from radio button & select box

P: 5
Hi, firstly I am a total freshie in all this. From what I have gathered on the web and this forum, I finally managed to get my form up.

I have a set of radio buttons with values to it and a select box with values too. Depending on the options selected from the two, the values will be calculated and displayed. everything worked fine with the calculation and im getting the right amount totalled up.

I only have one issue, whenever the radio button is clicked, the values gets updated but when a different option is selected from the select box it doesnt gets updated unless i click once more on the radio button.

Below is my code. Any kind of help is much appreciated. Thanks!

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .style1 {
  9.     font-size: 18px;
  10.     font-family: Arial, Helvetica, sans-serif;
  11. }
  12. .style8 {font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
  13. .style9 {font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #FF0000; }
  14. .style10 {
  15.     color: #CCCCCC
  16. }
  17. -->
  18. </style>
  19. <script type="text/javascript"> 
  20.     function checkIt(el) { 
  21.         var adType;
  22.         if (el.value == 'hot_banner'){
  23.             adType = 500
  24.         }else if(el.value == 'hip_banner'){
  25.             adType = 300
  26.         }else if(el.value == 'cool_banner'){
  27.             adType = 150
  28.         }else if(el.value == 'top_text'){
  29.             adType = 100
  30.         }else if(el.value == 'tower_text'){
  31.             adType = 80
  32.         }else if(el.value == 'center_text'){
  33.             adType = 150
  34.         }
  35.  
  36.         var mths; 
  37.         mths = document.getElementById("duration").value;
  38.         document.getElementById("amount").value=parseInt(adType)*parseInt(mths);
  39.     }
  40. </script>
  41. </head>
  42.  
  43. <body>
  44. <table width="605" border="0" cellpadding="5" cellspacing="0" bgcolor="#F7F7F7">
  45.   <tr>
  46.     <td width="197" align="right" valign="top" class="style8">Select Advertising Location:</td>
  47.     <td width="388" class="style8"><label>
  48.       <input type="radio" name="type" id="hot_banner" value="hot_banner" onclick="checkIt(this)"/>
  49.       Hot Cover Banner Package (S$500/month) <a href="#">See Location</a><br />
  50.       <input type="radio" name="type" id="hip_banner" value="hip_banner" onclick="checkIt(this)"/>
  51.       Hip Horizontal Banner Package (S$300/month) <a href="#">See Location</a><br />
  52.       <input type="radio" name="type" id="cool_banner" value="cool_banner" onclick="checkIt(this)"/>
  53.       Cool Tower Banner (Big) Package (S$150/month) <a href="#">See Location</a><br />
  54.       <input type="radio" name="type" id="top_text" value="top_text" onclick="checkIt(this)"/>
  55.       Happening Top Text Package (S$100/month) <a href="#">See Location</a><br />
  56.       <input type="radio" name="type" id="tower_text" value="tower_text" onclick="checkIt(this)"/>
  57.       Happening Tower Text Package (S$80/month) <a href="#">See Location</a><br />
  58.       <input type="radio" name="type" id="center_text" value="center_text" onclick="checkIt(this)"/>
  59.       Happening Center Text Package (S$150/month) <a href="#">See Location</a></label></td>
  60.   </tr>
  61.   <tr>
  62.     <td align="right" class="style8">Select Advertisment Duration:</td>
  63.     <td class="style8"><p>
  64.       <select name="duration" id="duration">
  65.         <option onchange="checkIt(this)" value="1" selected="selected">1 Month</option>
  66.         <option onchange="checkIt(this)" value="2">2 Months</option>
  67.         <option onchange="checkIt(this)" value="3">3 Months</option>
  68.         <option onchange="checkIt(this)" value="4">4 Months</option>
  69.         <option onchange="checkIt(this)" value="5">5 Months</option>
  70.         <option onchange="checkIt(this)" value="6">6 Months</option>
  71.         <option onchange="checkIt(this)" value="12">12 Months</option>
  72.       </select>
  73.     </p>
  74. </td>
  75.   </tr>
  76.   <tr>
  77.     <td colspan="2" align="center" class="style8"><span class="style9">S$<b>
  78.     <input name="amount" type="text" id="amount" size="12" value="auto calculated" readonly="readonly"/>
  79.     </b></span></td>
  80.   </tr>
  81. </table>
  82. </body>
  83. </html>
Jan 9 '08 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
onchange should be added to the select element, not to each option.
Jan 9 '08 #2

P: 5
Ahh.. thats where i went wrong. That really does the trick. Thanks so much.

But now, after selecting from the select box, I got a NaN but after clicking back on the radio button it outputs back the right calculation.
Jan 9 '08 #3

acoder
Expert Mod 15k+
P: 16,027
That's because you're using the same checkIt() function and passing it the select element as the argument (this) whereas it expects a radio button. What you should do is change checkIt to have no arguments (don't pass 'this' to it) and find the selected radio button using the checked property. Loop over the radio buttons until you find the checked one.
Jan 9 '08 #4

P: 5
Hi acoder, once again thanks for pointing out my mistakes. I've tried to find out ways to do this but no matter what I tried I got myself lost further.

Could you assist me one last time by showing me how this can be done from amending my code. Thanks again.
Jan 9 '08 #5

P: 5
Hi can anyone else help a newbie on this issue. I need to see a sample code. Thanks
Jan 10 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Something like this would give you the checked radio button:
Expand|Select|Wrap|Line Numbers
  1. var checkedRadio;
  2. var radios = document.getElementsByName("type");
  3. for (var i = 0; i < radios.length; i++) {
  4.   if (radios[i].checked) {
  5.     checkedRadio = radios[i];
  6.   }
  7. }
Jan 10 '08 #7

P: 5
Thank you so much for the help acoder!!
Jan 10 '08 #8

acoder
Expert Mod 15k+
P: 16,027
You're most welcome. Glad you got it working. Post again if you have any more questions.
Jan 10 '08 #9

Post your reply

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