Question

Less than or equal to Javascript

Forms

Updated December 1, 2015

asked on November 23, 2015

Hi all,

Can someone please help me out with this javascript? I would like to have the user input a dollar amount, and if that amount is less than or equal to 50 then the form populates another field with that value. If the user inputs a value greater than 50, then the other field would show a value of 50.

Thank you in advance.

0 0

Answer

SELECTED ANSWER

replied on December 1, 2015

Here's an example form and JS:

The form has two currency fields. The first currency field will be used for the user input and has a CSS class name, amount. The second currency field will be used for the display and has a CSS class name, max50.

$(document).ready(function () {
  $('.max50 input').attr('readonly',true);
  $('.amount input').on('change', function() {
    if ($(this).val() <= 50) {
      $('.max50 input').val($(this).val());
    } else {
      $('.max50 input').val(50);
    }
  });
});

So depending on the user input, if it's less than or equal to 50, then the display field will show whatever the user input was. If the user input was greater than 50, then the display field will just show 50. I also made the display field read-only in case you didn't want the user to manually change it.

0 0

Replies

replied on November 23, 2015

First, make sure to assign the fields class names, then the following code should work:

$(document).on('change','li[attr=classofinputfield] input.singleline', function() {
     if (+this.value<50) {
          $('li[attr=classofanotherfield] input.singleline').val(this.value);
     else if (+this.value>50) {
           $('li[attr=classofotherfield] input.singleline').val(this.value);
     }
});

And the slightly shorter version:

$(document).on('change','li[attr=classofinputfield] input.singleline', function() {
     $('li[attr=' + (+this.value<50 ? 'classofanotherfield' : +this.value>50 ? 'classofotherfield' : '') + '] input.singleline').val(this.value);
});

0 0

replied on December 1, 2015

Thank you for your suggestions. Unfortunately, I could not get either of them to work. Just to clarify, where you have "class of another field" and "class of other field," are those supposed to be separate boxes? I would like there to be one output box ideally.

0 0

SELECTED ANSWER

replied on December 1, 2015

Here's an example form and JS:

$(document).ready(function () {
  $('.max50 input').attr('readonly',true);
  $('.amount input').on('change', function() {
    if ($(this).val() <= 50) {
      $('.max50 input').val($(this).val());
    } else {
      $('.max50 input').val(50);
    }
  });
});

0 0

replied on December 1, 2015

You beat me to it again Alex!

1 0

replied on December 1, 2015

Thanks Alex! Works great

0 0

You are not allowed to follow up in this post.

Question

Question

Less than or equal to Javascript

Answer

Replies

Sign in to reply to this post.