In a number field, I need to have the Range Allowed based on Variables. I need Number1 Range to be minimum = 0 (which I can do), but maximum to be based on the Max field. How can I do that?
Hi Katy,
Here are a couple options to use the built-in max attribute; this way you don't need to hide the submit button because it will validate the field and show an error just like when you set a static range.
Option 1 - No max when max is blank
$(document).ready(function(){
// whenever max value changes
$('.maxattendees input').on('change',function(){
// get max from field
var max = $(this).val();
// get number1 field
var number1 = $('.attendees input');
// check if max populated
if (max != '') {
// set number1 max value
number1.attr('max',max);
}
else {
// remove restriction if max blank
number1.removeAttr('max');
}
// if not blank, revalidate
if(number1.val() != '') number1.parsley().validate();
});
});
Option 2 - Set default max when max field is blank
$(document).ready(function(){
// whenever max value changes
$('.maxattendees input').on('change',function(){
// get max from field or default if blank
var max = $(this).val() != '' ? $(this).val() : 999999;
// get number1 field
var number1 = $('.attendees input');
// set number1 max value
number1.attr('max',max);
// if not blank, revalidate
if(number1.val() != '') number1.parsley().validate();
});
});
Either way, the result will be something like this
And, I figured it out. I set classes on my fields (attendees and maxattendees), then used the following code
$(document).ready(function () {
$('.attendees input').change(function () {
if ($('.attendees input').val() > $('.maxattendees input').val()){
$('.attendees input').val('').change();
$('.Submit').hide();
}
else
{
$('.Submit').show();
}
});
});
You want to be careful with value comparisons in JavaScript. If the values are being evaluated as text/strings instead of numbers you'll end up with unexpected results.
For example with string formats '10' > '2' = false because strings are compared alphabetically meaning '1', '10', '11' etc. are all less than '2'.
In order to ensure numeric comparisons you would want to use parseInt; this isn't a problem with the examples I posted because they're just setting the max attribute not doing the comparisons.
So true! How do I fix that?
Although the max attribute solution is much more manageable, if you do ever need to deal with comparing numeric values for other things you can use parseInt() (or parseFloat() if you need decimals).
Here are some tips on what to consider and things to look out for:
parseInt($('.myField input').val()) will try to convert the contents to a number.
However, something you'll need to watch out for is that empty string values will result in a NaN (Not-a-Number) output.
There's another function in JavaScript called isNaN() that will check for NaN, but this has limitations too because the behavior doesn't quite match up with parseInt(), more specifically for empty strings/inputs.
For example,
parseInt('') = NaN
but
isNaN('') = false
This means parseInt on empty string will return NaN, but isNaN will return false for an empty string so you'd need to evaluate in specific ways to get the desired result.
// parse int value first
var myValue = parseInt($('.myField input').val());
// check isNaN on the parsed value afterward
if (!isNaN(myValue)){
// do something if number
}
else {
// do something if NaN
}
Some other things to consider are:
For example,
parseInt('1x2') = 1
parseInt('x2') = NaN
parseInt('1.9') = 1
parseInt('.9') = NaN
You are AWESOME! Option1 works perfect
Does this work in Version 11?
If so, where is the code entered. I can't find it.
The new designer doesn't have JavaScript yet so the only way to do this in Forms 11 is to use the classic designer for now.
Once JavaScript is added, I'm sure the code will be different as well.
any luck setting this in the new designer yet?
EDIT: looks like this was added to field rules. Cool!
https://answers.laserfiche.com/questions/207978/Feature-Request-Ability-to-Use-Variable-in-Minimum-and-Maximum-Date-Settings