Select dropdown based off calculation of two fields (javascript)

SELECTED ANSWER

replied on June 6, 2019 • Show version history

The document.ready event won't be the problem. All that means is that when the document is "ready" it runs the contained code, which in this case means it assigns the handlers as soon as the document is ready.

I think the following might actually be the problem:

You're attaching the change event handlers to the source fields, but you're looking at the value of the calculated field.

The problem with that is the change on the source fields occurs as soon as the field loses focus, but if you have a calculation filling the .need field, then it doesn't fire until after the change event on the first field.

Basically, when your function executes hbportion hasn't been updated yet.

A good way to test is to add console.log(hbportion) before the if, and then open the browser dev tools so you can see every time it gets triggered.

Since you have a field with the calculated value, the change event should be attached to that instead. Also, you don't need the "else" branch since you're setting default values.

$(document).ready(function(){
    $('.need input').on('change',function(){
         var hhportion = $(this).val();
         var under = 'No';
         var warn = 'red';

         if(hbportion < 150){
             under = 'Yes';
             warn = 'green';
         }
          
         $('.underlimit select').val(under);
         $('#q16 select').css('background-color',warn);         
   });
});

1 0

replied on June 4, 2019

Any particular reason you're using a dropdown? Can the user manually change the value, or should it only be set based on the rule you described?

0 0

View 2 previous replies

replied on June 5, 2019

Thanks for responding Jason. I suppose I could use a text field or label for this particular example, but this was simplest one I could think of right now. I have others that the user could override the result and select something different in the drop-down.

I have a few of these in a longer form and I would like to see the general template for setting the value of a some type of form control IF the computed result of multiple fields equals X, Less than X, Greater than, etc.

0 0

replied on June 5, 2019 • Show version history

What I would do is add a hidden number field, use calculations to get your total in that field, then trigger the change based on that field.

The advantage of this approach is that you don't have to monitor the change events for two separate fields.

$(document).ready(function(){
    $('.difference input').on('change',function(){
         var difference = $(this).val();
         var eligible = 'No';

         if(difference < 150){
             eligible = 'Yes';
         }

         $('.eligible select').val(eligible);
   });
});

Whenever the hidden "difference" field changes, it will check the value and apply the selection to the "eligible" drop down.

You can do it without a third field, but you would need to assign change event handlers to both the balance and available fields so it checks when either one changes.

$(document).ready(function(){
    $('.balance input, .available input').on('change',function(){
         var difference = $('.balance input').val() - $('.available input').val();
         var eligible = 'No';

         if(difference < 150){
             eligible = 'Yes';
         }

         $('.eligible select').val(eligible);
   });
});

I included the IF because you said you might have more than 2 checks, but if you only have two you could use a ternary operator instead.

$(document).ready(function(){
    $('.balance input, .available input').on('change',function(){
         var difference = $('.balance input').val() - $('.available input').val();
         var eligible = (difference < 150) ? 'Yes' : 'No';

         $('.eligible select').val(eligible);
   });
});

2 0

replied on June 6, 2019

Fantastic Jason! Thank you. That pretty much got me to where I need with some options. I got it to work with a little modification, but there is one quirk I'd like to ask about. If I go through my form and the function fires, it works the first time. However, if a mistake was made and we needed to change one of the fields it was watching for onchange, it doesn't seem to work after that. Is that because of the (document).ready method? Here is my code:

$(document).ready(function(){
    $('.lasthelp input, .gothelp select').on('change',function(){
         var hhportion = $('.need input').val();
         var under = 'No';
         var warn = 'red';

         if(hhportion < 150){
             under = 'Yes';
             warn = 'green'; 
             $('.underlimit select').val(under);
             $('#q16 select').css('background-color',warn);
             }
         else{
             under = 'No';
             warn = 'red';
             $('.underlimit select').val(under);
             $('#q16 select').css('background-color',warn);
             }
         
   });
});

I am looking at a change in a dropdown if we helped them before (gothelp) and a change in the amount that we helped them with (lasthelp). If (gothelp) is "yes" and the resulting amount in (need) <150, then dropdown (underlimit) should be green and "yes" selected.

If I go back and change (gothelp) to "No", or revise the amount in (lasthelp) so that the (need) is > 150, then it doesn't change (underlimit) to "No" and turn it red.

Am I adding too much to this handler?

Thank you so much for the help. You got me further than I was before!

0 0

SELECTED ANSWER

replied on June 6, 2019 • Show version history

I think the following might actually be the problem:

You're attaching the change event handlers to the source fields, but you're looking at the value of the calculated field.

Basically, when your function executes hbportion hasn't been updated yet.

A good way to test is to add console.log(hbportion) before the if, and then open the browser dev tools so you can see every time it gets triggered.

Since you have a field with the calculated value, the change event should be attached to that instead. Also, you don't need the "else" branch since you're setting default values.

$(document).ready(function(){
    $('.need input').on('change',function(){
         var hhportion = $(this).val();
         var under = 'No';
         var warn = 'red';

         if(hbportion < 150){
             under = 'Yes';
             warn = 'green';
         }
          
         $('.underlimit select').val(under);
         $('#q16 select').css('background-color',warn);         
   });
});

1 0

replied on June 6, 2019

Thanks again. This is working now. I thought the calculated field might have something to do with it. I only tinker with javascript :)

Cheers!

0 0

Question

Question

Select dropdown based off calculation of two fields (javascript)

Answer

Replies

Sign in to reply to this post.