Solved

Input type radio oncheck or onclick keep running totals of a product

Posted on 2014-02-02
10
331 Views
Last Modified: 2014-02-10
I have a product called PC. It comes with multiple product attributes very similar to buying a pc at hp.com or dell.com.

I am trying to provide a similar product customization.

So here is my html

<form id="cartForm" method="post" action="/cart.html">
<div class="prod-details">
<div class="prod-name">PC 1000</div>
<div class="prod-code">pc1000</div>
<div class="prod-price">$450.00</div>
<p>Customize your PC, We'll update your system price as you make your selections.</p>
<div class="prod-attributes">
<table>
<tr>
<td><input type="radio" value="Win8" name="os" data-price="0" id="Win8" /> Window 8 [included in price]</td>
<td><input type="radio" value="Win8.1" name="os" data-price="100" id="Win81" /> Window 8.1 [Add 100]</td>
<td><input type="radio" value="Winpro8.1" name="os" data-price="160" id="Winpro81" /> Window 8.1 Pro [Add 160]</td>
</tr>
<tr>
<td><input type="radio" value="4gb" name="ram" id="r4GB" data-price="0" /> 4GB [included in price]</td>
<td><input type="radio" value="8gb" name="ram" id="r8GB" data-price="40" /> 8GB [Add 40]</td>
<td><input type="radio" value="12gb" name="ram" id="r12GB" data-price="70" /> 12GB [Add 70]</td>
</tr>
</table>
</div>
</form>
<div id="rTotal">450.00</div>

Open in new window


As you can see from above the rTotal by default has the starting price of the product, now if one of the options radio options from os and ram is selected it should update the price and display it in rTotal

Basically if selected OS is Win 8.1 so add 100 to 450 and rTotal would be 550 and if ram selected is 8gb add another 40 to 550 so now Total comes to 590

similarly, if now the option one of the lower price option is selected it should deduct that amount too.

any sample or reference example is highly appreciated.

Thanks
0
Comment
Question by:niceoneishere
  • 5
  • 4
10 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
I've made a few amendments to your HTML to keep the code tidy.
Jquery
$("[name=os],[name=ram]").change(function(){
    $("#rTotal").html(parseInt($(".prod-price").html()) + parseInt($("[name=os]:checked").data("price"))+parseInt($("[name=ram]:checked").data("price")))
    
})

Open in new window


http://jsfiddle.net/GaryC123/2tLEF/1/
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Try to add this script and assign it to the onchange event of the radios:
document.getElementById("rTotal").value=parseint(document.getElementsByName("os")[0].options(document.getElementsByName("os")[0].options[document.getElementsByName("os")[0].selectedIndex].text)+parseint(document.getElementsByName("ram")[0].options(document.getElementsByName("ram")[0].options[document.getElementsByName("ram")[0].selectedIndex].text);

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
Comment Utility
Hi Cathal,

Thanks for replying and apologize for not getting back immediately. I tried and it works but now i have one more thing, I tried adding a select box like below

<select id="os" name="os">
  <option value="Win8" data-price="0" id="Win8" selected>Window 8 [included in price]</option>
  <option value="Win8.1" data-price="100" id="Win81" selected>Window 8.1 [Add 100]</option>
  <option value="Winpro 8.1" data-price="160" id="Winpro81" selected> Window 8.1 Pro [Add 160]</option>
</select>

Open in new window


It doesn't work, should I be changing the JS too. Because I would like to use both radio as well as select boxes.

Thanks a Bunch.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
Comment Utility
$("[name=os],[name=ram]").change(function(){
    $("#rTotal").html(parseInt($(".prod-price").html()) + parseInt($("[name=os] :selected").data("price"))+parseInt($("[name=ram]:checked").data("price")))
})

Open in new window

You would want to make your default (no extra charge) option the selected one, not all of them as you have now
0
 
LVL 1

Author Comment

by:niceoneishere
Comment Utility
Thanks for replying, yes that's correct its was typo mistake only one selected option is there but its not working.

Here as you can see in fiddle like below

http://jsfiddle.net/pepin/2tLEF/4/

Thanks
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
Comment Utility
You're missing a space before :selected (its important)
http://jsfiddle.net/2tLEF/5/
0
 
LVL 1

Author Comment

by:niceoneishere
Comment Utility
Sadly its still not working, is it ok if I email you may test product link sir
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
What's wrong with the fiddle link I posted?
0
 
LVL 1

Author Comment

by:niceoneishere
Comment Utility
Thanks I started from scratch. and It worked perfectly. Appreciate it. :)
0
 
LVL 1

Author Closing Comment

by:niceoneishere
Comment Utility
Thanks
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now