?
Solved

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

Posted on 2014-02-02
10
Medium Priority
?
405 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 2000 total points
ID: 39828392
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
ID: 39829131
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 2

Author Comment

by:niceoneishere
ID: 39844798
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 58

Assisted Solution

by:Gary
Gary earned 2000 total points
ID: 39844814
$("[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 2

Author Comment

by:niceoneishere
ID: 39845443
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
 
LVL 58

Expert Comment

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

Author Comment

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

Expert Comment

by:Gary
ID: 39845515
What's wrong with the fiddle link I posted?
0
 
LVL 2

Author Comment

by:niceoneishere
ID: 39848458
Thanks I started from scratch. and It worked perfectly. Appreciate it. :)
0
 
LVL 2

Author Closing Comment

by:niceoneishere
ID: 39848460
Thanks
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

569 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