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! - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<title>Untitled Document</title>
-
<style type="text/css">
-
<!--
-
.style1 {
-
font-size: 18px;
-
font-family: Arial, Helvetica, sans-serif;
-
}
-
.style8 {font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
-
.style9 {font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #FF0000; }
-
.style10 {
-
color: #CCCCCC
-
}
-
-->
-
</style>
-
<script type="text/javascript">
-
function checkIt(el) {
-
var adType;
-
if (el.value == 'hot_banner'){
-
adType = 500
-
}else if(el.value == 'hip_banner'){
-
adType = 300
-
}else if(el.value == 'cool_banner'){
-
adType = 150
-
}else if(el.value == 'top_text'){
-
adType = 100
-
}else if(el.value == 'tower_text'){
-
adType = 80
-
}else if(el.value == 'center_text'){
-
adType = 150
-
}
-
-
var mths;
-
mths = document.getElementById("duration").value;
-
document.getElementById("amount").value=parseInt(adType)*parseInt(mths);
-
}
-
</script>
-
</head>
-
-
<body>
-
<table width="605" border="0" cellpadding="5" cellspacing="0" bgcolor="#F7F7F7">
-
<tr>
-
<td width="197" align="right" valign="top" class="style8">Select Advertising Location:</td>
-
<td width="388" class="style8"><label>
-
<input type="radio" name="type" id="hot_banner" value="hot_banner" onclick="checkIt(this)"/>
-
Hot Cover Banner Package (S$500/month) <a href="#">See Location</a><br />
-
<input type="radio" name="type" id="hip_banner" value="hip_banner" onclick="checkIt(this)"/>
-
Hip Horizontal Banner Package (S$300/month) <a href="#">See Location</a><br />
-
<input type="radio" name="type" id="cool_banner" value="cool_banner" onclick="checkIt(this)"/>
-
Cool Tower Banner (Big) Package (S$150/month) <a href="#">See Location</a><br />
-
<input type="radio" name="type" id="top_text" value="top_text" onclick="checkIt(this)"/>
-
Happening Top Text Package (S$100/month) <a href="#">See Location</a><br />
-
<input type="radio" name="type" id="tower_text" value="tower_text" onclick="checkIt(this)"/>
-
Happening Tower Text Package (S$80/month) <a href="#">See Location</a><br />
-
<input type="radio" name="type" id="center_text" value="center_text" onclick="checkIt(this)"/>
-
Happening Center Text Package (S$150/month) <a href="#">See Location</a></label></td>
-
</tr>
-
<tr>
-
<td align="right" class="style8">Select Advertisment Duration:</td>
-
<td class="style8"><p>
-
<select name="duration" id="duration">
-
<option onchange="checkIt(this)" value="1" selected="selected">1 Month</option>
-
<option onchange="checkIt(this)" value="2">2 Months</option>
-
<option onchange="checkIt(this)" value="3">3 Months</option>
-
<option onchange="checkIt(this)" value="4">4 Months</option>
-
<option onchange="checkIt(this)" value="5">5 Months</option>
-
<option onchange="checkIt(this)" value="6">6 Months</option>
-
<option onchange="checkIt(this)" value="12">12 Months</option>
-
</select>
-
</p>
-
</td>
-
</tr>
-
<tr>
-
<td colspan="2" align="center" class="style8"><span class="style9">S$<b>
-
<input name="amount" type="text" id="amount" size="12" value="auto calculated" readonly="readonly"/>
-
</b></span></td>
-
</tr>
-
</table>
-
</body>
-
</html>
8  2981  acoder 16,027
Recognized Expert Moderator MVP
onchange should be added to the select element, not to each option.
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.
acoder 16,027
Recognized Expert Moderator MVP
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.
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.
Hi can anyone else help a newbie on this issue. I need to see a sample code. Thanks
acoder 16,027
Recognized Expert Moderator MVP
Something like this would give you the checked radio button: - var checkedRadio;
-
var radios = document.getElementsByName("type");
-
for (var i = 0; i < radios.length; i++) {
-
if (radios[i].checked) {
-
checkedRadio = radios[i];
-
}
-
}
Thank you so much for the help acoder!!
acoder 16,027
Recognized Expert Moderator MVP
You're most welcome. Glad you got it working. Post again if you have any more questions.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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
multiple records and want two values depending on the row they select.
slaveform: x=selected
|
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 is selected - enable a field to use
the M$ Datepicker. Using the code below works for most of our fields,
however the problem is that when the field is re-enabled - it
remembers the original date or data prior to it being disabled -
despite the...
|
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
the form (not in a text box). I've tried using document.write("yada"), but
it clears the page before showing the text. How can I do it?
BTW, I'm currently using js in conjunction with CSS to unhide the text.
This works fine, except it requires...
|
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 button of the list you want
to use.
I'm using JavaScript to automatically select the radio button
corresponding to a list when you click on the list (using the onclick
event handler). Is that the best event to change on, or should this
|
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 does so far and is failing to do
*******************************
<?php
session_start();
header("Cache-control: private"); //IE 6 Fix
include("myconn.php");
| | |
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 into converting into
code.
|
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 problem after
problem (object has no properties, undefined functions, etc.)
So, I am really hoping someone can end the madness for me.
Just so it's understood, the id's and names of the radio buttons vary
with a row in a table so I CANT know the...
|
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 to let the customer choose different product ids that always have a variant id associated with each product id. In other words If customer chooses product 1 it will always have a variantid= 10 and product 2 will always have variantid=20. So .. I...
|
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 />";
The post_data.php program posts the following
member id is: 0009
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
