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.