jQuery Automatic Update Order Form

Monday August 23, 2010 Tutorials

The Inspiration

I am currently teaching a JavaScript for designers course at CDIA in DC and the students have a final project of designing an order form for a PSD to HTML service. There are a number of CSS slicing sites, and a few of them have really cool order forms.

 

The Goal, the Example, and a Thanks

We wanted to be able to create an order form that automatically updated the price depending on whether the user selected certain services using either radio buttons or check boxes. To do this we used a combination of straight JavaScript and jQuery to tell when a radio button or checkbox had been selected and calculate the total.

 

I have to thank Chris from CSS tricks for his great custom jquery order form, which does something similar but using text input fields instead of buttons. You rock man!

 

Check out the demo

 

Getting started with the Markup and Style

There is nothing too special here about the mark. Just a normal XHTML document with a form and some fieldsets with radio buttons and a checkbox.

 

The one special thing is that we are adding the paragraphs containing the paragraphs using JavaScript. This is so that when a visitor uses the form with JavaScript disabled he or she will not see a big Total: with nothing next to it. No JavaScript and you never know what you were missing.

 

Rather than post all of the HTML and CSS, just view the source file and grab what you need.

 

A Calculate Total Function

Before we do much else we are going to write a function that calculates the sum of all of the value attributes for selected checkboxes and radio buttons. The code to do this looks like this:

 

function calcTotal()
{
	$("input:checked").each(function()
	{
		//This happens for each checked input field
		var value = $(this).attr("value");
		total += parseInt(value); //total = total + value			
       });
}

Here are a few interesting things that are happening here:

 

The input:checked selects all of the input elements that are checked or selected. Then we apply .each() which allows us to write a function for each selected input.

 

Using the attr("value") allows us to get the value for the value attribute for each selected field. It's key, therefore that your value attributes are appropriately labeled with the price for the radio button or checkbox they are added to.

 

The last line adds the value to the total. An important note is that the value is initially a string when it is grabbed from the form. We use the parseInt() function to convert the string to a number so that we can add it to the total. Without this step you will get a NaN error saying that you are trying to add something that is not a number.

 

Displaying the Total

Once we have that function written we can call it, and load the to paragraphs elements that will display the total on top of and below the form.

The code for that looks like this:

calcTotal();	
$("form").before('<p class="total">Total: <strong>' + total + '</strong></p>');
$(":submit").before('<p class="total">Total: <strong>' + total + '</strong></p>');

So, we are calling the function to calculate the total and then displaying that total before the form and then before the submit input field. That .before function sure comes in handy (as well as the .after) when you are trying to add elements to the DOM.

 

We should see the correct total now. If we change the input fields and refresh the page, it will refresh with the new total, but we want to total to refresh without a page refresh.

 

Changing the Total When an Radio Button or Checkbox Changes

To accomplish this we write a simple function for each time a radio button or checkbox changes. To accompllish this we will rely on the handy :radio and :checkbox selectors

 

The code looks like this:

 

$("input:checkbox, input:radio").click(function()
{
	total = 0;
	calcTotal();
	$("p.total").html("Total: <strong>" + total + "</strong>");
});

Notice that we have to reset the total to zero before we run the caclTotal() function, otherwise we will be adding the new total to the previous total and really confusing our user.

 

Once the total is updated we use the jquery .html() function to update the paragraph elements with the .total class.

 

All Done

Check out the demo

 

and the complete JavaScript for the demo:

 

$(document).ready(function()
{	
	var total = 0;
	
	function calcTotal()
	{
		$("input:checked").each(function()
		{
			//This happens for each checked input field
			var value = $(this).attr("value");
			total += parseInt(value); 
		});
	}

	//This happens when the page loads
	calcTotal();	
	$("form").before('<p class="total">Total: <strong>' + total + '</strong></p>');
	$(":submit").before('<p class="total">Total: <strong>' + total + '</strong></p>');
		
	$("input:checkbox, input:radio").click(function()
	{
		total = 0;
		calcTotal();
		$("p.total").html("Total: <strong>" + total + "</strong>");
	});
});