473,387 Members | 1,520 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > adding values from radio button & select box

Join Bytes to post your question to a community of 473,387 software developers and data experts.

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.         }
  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
8 2940
acoder
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
acoder
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
acoder
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
acoder
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

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

Similar topics

4
Pop-Up Pass Multiple Dynamic Values Between Forms
by: cwwilly | last post by:
Hello, Thanks for taking a look at this! Problem: I'm trying to pass multiple dynamic values between a slaveform and a masterform. The problem I'm having is on the slaveform I loop through...
Javascript
1
Enable/Disable and clearing values
by: hortoristic | last post by:
We are using JavaScript to Enable/Disable certain fields on web pages based on business rules. A simple example is if when using an option type tag, and the two options are Yes and No. If YES...
Javascript
32
Adding text to an HTML page
by: Ed Jay | last post by:
A complete js newbie is asking this question: I have a form comprised of several questions, each answered with a radio button. I'd like to use onClick to bring up additional text at the end of...
Javascript
1
Drop-down (select) elements and radio buttons - best approach?
by: Joe Attardi | last post by:
Hi all, On a form on one of my pages I have two <select> elements, and each one is paired up with a radio button. The idea is to choose an item from one list or the other and select the radio...
Javascript
6
unable to retain values in text box
by: Ian Davies | last post by:
Hi me again, sorry to be a pain. Ive been struggling with this one all day. Hope you can understand whats happening. First my script is below. Have a look and I'll explain at the bottom what it...
PHP
2
On select Radio Button / Change Combo box values
by: Eric Layman | last post by:
Hi, I have a radio button and a combo box. Upon changing a value for radio button, the combo box values will be dynamically updated. I have an idea on how to go abt doing it but Im stuck...
Javascript
1
contactenating radio select values to one hidden field
by: Sideswipe | last post by:
I am trying to concatenate selected values from numerous radio button sets into 1 series and assign it to a single hidden field. I have never done javascript before and I continue to run into...
Javascript
0
Help! I need to Pass Multiple Names & Values with One Radio Button Form
by: Jimstershat | last post by:
Hello Everyone, I need to do the following; I need to create the following url using a radio form: http://www.domain.com/addtocart.aspx?productid=18&variantid=37&quantity=1 I need to be able...
HTML / CSS
6
following radio & hidden does not work..... help please.
by: dba | last post by:
using the following code with a problem.... echo "<input type='hidden' name='member_id' value=\"{$row}\">{$row}"; echo "<input type='radio' name='member_name' value=\"{$row}\">{$row}<br />"; ...
PHP
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!