[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery math and radio button sets

Posted on 2009-12-21
3
Medium Priority
?
802 Views
Last Modified: 2012-06-27
In the attached code, I have JQuery calculating price differences for a single set of radio buttons when a particular button is selected, However if I add multiple radio sets, the price differences are calculated based on a click from any of the options sets resulting in incorrect values. The calculation should occur for each set, but remain confined within the set.

The included JQuery grabs a price from a hidden form field within a radio button's label tag. based on the checked radio button, the price difference between the checked option and the others in a  given set is displayed within a <span> tag.

Because the option sets are dynamically created and can change from product to product, the only ID that can be relied on is the one from the <ul> if needed.

Another thing this code should do is display the price differences on page load. Right now the code only calculates when a radio button is checked.

Any help is greatly appreciated. I'm rather new to Javascript and JQuery library.
<html>
<head>
<title>Test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
	// calc option price differences
	$("label input:radio").click(function()
	{
		var _price = $(this).next().val();
		$("label span").remove();
		$("label input:radio").map(function()
		{
			var diff = _price - $(this).next().val();
			if (diff != 0)
			{
				diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
				$(this).parent().append(' <span>' + diff + '</span>');
			}
		});
	});
});
</script>

<style type="text/css" media="screen">
ul { list-style-type: none; }
span { color: blue; }
</style>
</head>
<body>

<ul id="model">
      <li><label for="model1"><input type="radio" id="model1" name="model" value="PART-NO-1" checked="checked" /><input type="hidden" value="100.00" /> Widget 1</label></li>
      <li><label for="model2"><input type="radio" id="model2" name="model" value="PART-NO-2" /><input type="hidden" value="200.00" /> Widget 2</label></li>
      <li><label for="model3"><input type="radio" id="model3" name="model" value="PART-NO-3" /><input type="hidden" value="300.00" /> Widget 3</label></li>
</ul>

<ul id="size">
      <li><label for="size1"><input type="radio" id="size1" name="size" value="PART-NO-4" /><input type="hidden" value="5.00" /> Small</label></li>
      <li><label for="size2"><input type="radio" id="size2" name="size" value="PART-NO-5" /><input type="hidden" value="10.00" /> Medium</label></li>
      <li><label for="size3"><input type="radio" id="size3" name="size" value="PART-NO-6" checked="checked" /><input type="hidden" value="15.00" /> Large</label></li>
</ul>

<ul id="color">
      <li><label for="color1"><input type="radio" id="color1" name="color" value="PART-NO-7" /><input type="hidden" value="10.00" /> Blue</label></li>
      <li><label for="color2"><input type="radio" id="color2" name="color" value="PART-NO-8" checked="checked" /><input type="hidden" value="20.00" /> Red</label></li>
      <li><label for="color3"><input type="radio" id="color3" name="color" value="PART-NO-9" /><input type="hidden" value="30.00" /> Yellow</label></li>
</ul>

</body>
</html>

Open in new window

0
Comment
Question by:Animaze
  • 2
3 Comments
 
LVL 58

Expert Comment

by:amit_g
ID: 26107533
Like this
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio").click(function()
        {
                var _price = $(this).next().val();
                $("label span", $(this).parent().parent().parent()).remove();
                $("label input:radio", $(this).parent().parent().parent()).map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });
});

Open in new window

0
 

Author Comment

by:Animaze
ID: 26107725
Thank you, amit_g,

That works perfect.

Would you happen to know how it could also display the price differences on page load based off of the default "checked" radio buttons? RIght now a radio button has to first be checked for the prices to display.
0
 
LVL 58

Accepted Solution

by:
amit_g earned 2000 total points
ID: 26107793
You can fire the click event
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio").click(function()
        {
                var _price = $(this).next().val();
                $("label span", $(this).parent().parent().parent()).remove();
                $("label input:radio", $(this).parent().parent().parent()).map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });

        $("label input:radio:checked").each(function()
        {
        	$(this).click();
        });
});
</script>

Open in new window

0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 21 hours left to enroll

834 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