?
Solved

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

Posted on 2014-02-02
10
Medium Priority
?
382 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 1

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 1

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 1

Author Comment

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

Author Closing Comment

by:niceoneishere
ID: 39848460
Thanks
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…
Suggested Courses

765 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