• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

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

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
niceoneishere
Asked:
niceoneishere
  • 5
  • 4
2 Solutions
 
GaryCommented:
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
 
Sar1973Commented:
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
 
niceoneishereAuthor Commented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GaryCommented:
$("[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
 
niceoneishereAuthor Commented:
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
 
GaryCommented:
You're missing a space before :selected (its important)
http://jsfiddle.net/2tLEF/5/
0
 
niceoneishereAuthor Commented:
Sadly its still not working, is it ok if I email you may test product link sir
0
 
GaryCommented:
What's wrong with the fiddle link I posted?
0
 
niceoneishereAuthor Commented:
Thanks I started from scratch. and It worked perfectly. Appreciate it. :)
0
 
niceoneishereAuthor Commented:
Thanks
0
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now