Solved

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

Posted on 2014-02-02
10
345 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
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

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…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
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…

773 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