jQuery Automatic Update Order Form

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 coolorderforms.

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!

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:

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.

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

Hi! thanks for this lovely code. by far the simplest and most effective one I used for this purpose. My only question is: how do I apply the sum to include a quantity value on a drop down list? Please help.

Posted by felmov on 2013-10-13 10:13:25

Hi there,

nn

thanks for this, making life much easier but I was wondering how to add a select list to be fetched so just in case someone needs it:

nn

Add another $("select option:selected").each with the same structure to the calcTotal() function, that's it. Fetching from inputs and select lists.

nn

Cheers!

Posted by Ben on 2012-08-20 16:25:07

So Great! I will look at how to add a Quantity field to the form and then it will be Perfect!!!

Posted by Mark on 2012-06-28 07:38:01

Your URL appears often in my statistics (Awstats) that I look at daily to track results from advertising in several musical magazines websites as the source page.Do you perform tracking for any music industry sites, and if so, which one(s)?Please reply, Avrim Topel info@songcraftstation.com

Posted by Atopel on 2012-03-28 07:49:01

do you have this for dynamically added elements

Posted by Rajbaron on 2012-03-25 06:27:49

it sucksPosted by Norbert Breiner on 2012-02-18 18:22:13

This post was great, was able to take this and make something that does *almost exactly what I want it to: http://www.songcraftstation.co.... I've added some extra JQuery in here that opens up a couple of different selections based on the type of desk that is selected. The problem is that the form can be easily confused by selecting one of the optional items and then switching to another selection and choosing one of the new optional items.Long story short, I'd like to have the optional fields reset the total each time the user switches between desks. Any ideas?Posted by mpc532 on 2012-02-07 00:22:26

This is a great tutorial, I want to know how to apply this to a dynamic table in php. thanksPosted by Abdullahima on 2012-01-31 04:47:00

Thank you Dabrook for your reply.Can you please write send me a sample of the script for one hidden field?Posted by Fares Saad on 2012-01-18 03:41:36

Hey Fares, this would be possible. The easiest approach might be to have a hidden field that you just update with the name of the package whenever the radio button is selected.

Let me know if this is something you're not comfortable doing and I can create an extended demo that included this.Posted by dabrookwebucation on 2012-01-17 14:20:52

Hello, We need to send an email to the admin showing what the user has selected.How can we post the values of the selected labels?ThanksPosted by Fares Saad on 2012-01-17 06:29:12

FYI: the radio button values are correct. It charges you $39 for the no-charge deliveryPosted by Someone on 2011-12-12 13:46:13

Thank you very much, works a charm for both the webpage and the email.Posted by Bestrafung on 2011-11-28 23:28:07

Try doing something like this:

total = "$" + total;

before you add the total to the email.Posted by Zac on 2011-11-28 23:15:58

Thanks for the great form. From this comment I have managed to add a hidden field that will pass to an email script. Is there a way to add a currency symbol before the total? I will continue to try and figure it out but appreciate any help you'd be willing to provide.Posted by Bestrafung on 2011-11-28 23:12:11

ah right, so theres no way to maybe 'id' the script so that i could maybe id the auto update total to "idtotal", and in my form use this code to carry over the total = <input name="amount" type="hidden" value="idtotal"> this has worked on another form but it is not as good as this one. I have tried to place this code in the script but to no avail = document.getElementById("idtotal").value = idtotal;Thanks for your helpPosted by Jop on 2011-10-27 19:48:58

When you update the total on the page you would also have to update the value field for the price for your PayPal button. If your PayPal button has code in it to hardcode the price, just look at the ID for the input field and set the value to the price. If you are using encoded PayPal buttons it would require some heavy programming.Posted by dabrookwebucation on 2011-10-27 19:40:05

IfPosted by dabrookwebucation on 2011-10-27 19:37:43

how do i carry the total over to paypal?thanksPosted by Jop on 2011-10-27 18:16:56

Oh good! Glad you got it working!!!Posted by dabrookwebucation on 2011-09-06 16:53:46

got it! parseFloat(value) instead of parseInt(value)

:DPosted by Sykot on 2011-09-05 15:38:10

how will i add decimal number??? say 99.99 or 56.98 ??

can you help?Posted by Sykot on 2011-09-05 14:51:39

could you please extend your demo (html,js) with some text fields and select list?Posted by Fo on 2011-08-01 09:01:45