470,819 Members | 1,640 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,819 developers. It's quick & easy.

Adding values from radio button & select box

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.         }
  36.         var mths; 
  37.         mths = document.getElementById("duration").value;
  38.         document.getElementById("amount").value=parseInt(adType)*parseInt(mths);
  39.     }
  40. </script>
  41. </head>
  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
8 2715
16,027 Expert Mod 8TB
onchange should be added to the select element, not to each option.
Jan 9 '08 #2
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
16,027 Expert Mod 8TB
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
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
Hi can anyone else help a newbie on this issue. I need to see a sample code. Thanks
Jan 10 '08 #6
16,027 Expert Mod 8TB
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
Thank you so much for the help acoder!!
Jan 10 '08 #8
16,027 Expert Mod 8TB
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.

Similar topics

1 post views Thread by hortoristic | last post: by
32 posts views Thread by Ed Jay | last post: by
6 posts views Thread by Ian Davies | last post: by
2 posts views Thread by Eric Layman | last post: by
reply views Thread by mihailmihai484 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.