Using jQuery to validate the sum of form fields (2)

This post is more than 2 years old.

Yesterday I blogged about how you can use jQuery to validate the sum of a set of form fields. I had some great feedback, including a comment by Gareth Arch. He raised the point that - if you had 2 form fields that need to sum to 100, why not simply just let the user edit one field and automatically set the value of the other?

I liked this idea - but I didn't want to block editing of one particular field. Depending on how you feel you may want to edit either of the two fields. I based my modification on my last demo and added the following:

function setTo100() { var theVal = parseInt($(this).val()) var otherVal = 100-theVal if(this.id == 'phappy') $("#puhappy").val(otherVal) else $("#phappy").val(otherVal) }

$("#phappy").change(setTo100) $("#puhappy").change(setTo100)

Simply - I monitor the change event for my two form fields. When run, I get the value of the field changed and figure out what the other should be. I then look at the ID of the field changed and simply update the other one.

Simple and easy. You can demo this here.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Matthew Abbott posted on 3/27/2009 at 5:46 PM

In your demo code you have a comma after max:100 in the validate rules, and this made it generate an error in IE but not Firefox. After taking that out it works fine.

Comment 2 by Raymond Camden posted on 3/27/2009 at 5:47 PM

Oops. Sorry. Fixed and pushed up.

Comment 3 by Dan G. Switzer, II posted on 3/27/2009 at 6:27 PM

@Raymond:

Instead of using the change event, you could use the keyup event to update the values in realtime.

Comment 4 by Raymond Camden posted on 3/27/2009 at 6:30 PM

Nice. That does work better. For folks who visit the demo, please be sure to view source, although the only change was from

.change(setTo100)

to

.keyup(setTo100)

Comment 5 by Kit Brandner posted on 3/27/2009 at 7:41 PM

Works great, but if you enter a value that can't be parsed as an integer, it throws "NaN" in the other form field. You can get around this by using:

var theVal = (parseInt($(this).val()) || 0)

Comment 6 by Kit Brandner posted on 3/27/2009 at 7:43 PM

Never mind the last post, not sure what was happening. It appears jQuery wasn't validating properly, but it's working now.

Comment 7 by mahcsig posted on 3/27/2009 at 9:05 PM

One other code shortcut you can use is:
$("#phappy, #puhappy").keyup(setTo100)

Comment 8 by anthony posted on 3/28/2009 at 12:57 AM

You can even do it based on class or any other selectors, so you don't even need ids.

$("input").keyup(function () {
var otherVal = 100-parseInt($(this).val())
if(this == $("input")[0]) $("input:eq(1)").val(otherVal)
else $("input:eq(0)").val(otherVal)
})

Comment 9 by tony posted on 4/11/2009 at 12:36 AM

is it possible to do a @keyup after the 2nd character?

Comment 10 by Raymond Camden posted on 4/11/2009 at 12:37 AM

No. Event handles are based on events, not values. But obviously your code could look at the val, and if the size is 1, do nothing.

Comment 11 by tony posted on 4/11/2009 at 12:47 AM

ok you can obviously tell i'm a newbie to custom javascript :) thanks. just fyi, i was trying to bind a form to a cfdiv using zipcode to find results, but i didnt want the bind to kick off until the zipcode field length was 5 :) hence my question. so i'll change it from a bind url to a bind javascript and count the size before initiating the bind in the cfdiv??? i'll see if that works.

Comment 12 by Raymond Camden posted on 4/11/2009 at 12:50 AM

Sure, or your server side code could also check the length. It is better, traffic wise, to never send the request if it is too short.