Question

Help with JS to control the display of a field based on three other fields.

Forms Version 10

Updated July 24, 2020

asked on July 21, 2020

I have two drop-down fields with names which I will use to control the routing of the form (.formersup and .hiringmgr). Only one of the routing fields should show on the form based on the type of change being requested (.changeaction) and if the current supervisor (.currentsup) and proposed supervisor (.proposedsup) fields do not have the same value. I was able to control the display of the routing drop-down fields based solely on the type of change being requested, but when I tried to add the comparison of the two supervisor fields the JS broke. Can someone help me fix my JS to get it to work properly? Below is the JS that does not work and attached is a snapshot of the form. Any help is greatly appreciated.

$(document).ready(function() {

  $('.changeaction').click||
  $('.currentsup input, .proposedsup input').change
	(function(){

    if($('input[value="Demotion"]').is(':checked')||
       $('input[value="Promotion"]').is(':checked')||
       $('input[value="Transfer"]').is(':checked')||
       $('input[value="Supervisor_Change"]').is(':checked')&&
       $('.currentsup input').val() !== $('.proposedsup input').val())
      
      {
      $('.formersup').show();
      $('.hiringmgr').hide();
      }
    
    else
      {
      $('.hiringmgr').show();
      $('.formersup').hide();
      }
  });
});

Payroll Status Form Draft.PNG (141.54 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on July 23, 2020

In your line '.currentsup input, .proposedsup input', try replacing the 'input' with 'select'. Dropdowns use the select element, vs input for single-line, number fields, etc.

0 0

Replies

replied on July 21, 2020

Hi Vanessa,

Your if statement is currently evaluating whether it's demotion, promotion, or transfer, OR if it's both supervisor change and the supervisors don't match.

From your description it sounds like you want if the supervisors don't match AND it's one of the four types. If this is the case, replace the if statement with the following:

if(($('input[value="Demotion"]').is(':checked') ||
    $('input[value="Promotion"]').is(':checked') ||
    $('input[value="Transfer"]').is(':checked') ||
    $('input[value="Supervisor_Change"]').is(':checked')) &&
    $('.currentsup input').val() !== $('.proposedsup input').val())

You just needed to group together all the ORs and then add the AND outside of it.

0 0

View 1 previous reply

replied on July 23, 2020 • Show version history

It appears that the issue is with the trigger event on the drop-down boxes for supervisors. When I use the JavaScript with single line fields it works. Does anyone know how to trigger a change event on a drop-down box? Below is the script that works on single line fields (.currentsup / .proposedsup).

$(document).ready(function() {

  $('.changeaction').click|
  $('.currentsup input, .proposedsup input').change
	(function(){

   if(($('input[value="Demotion"]').is(':checked') ||
       $('input[value="Promotion"]').is(':checked') ||
       $('input[value="Transfer"]').is(':checked') ||
       $('input[value="Supervisor_Change"]').is(':checked')) &&
       $('.currentsup input').val() !== $('.proposedsup input').val())
    
      {
      $('.formersup').show();
      $('.hiringmgr').hide();
      }
    
    else
      {
      $('.hiringmgr').show();
      $('.formersup').hide();
      }
  });
});

0 0

SELECTED ANSWER

replied on July 23, 2020

In your line '.currentsup input, .proposedsup input', try replacing the 'input' with 'select'. Dropdowns use the select element, vs input for single-line, number fields, etc.

0 0

replied on July 24, 2020

Thank you Jim! You have been a great help and I have learned something new.

1 0

You are not allowed to follow up in this post.

Question

Question

Help with JS to control the display of a field based on three other fields.

Answer

Replies

Sign in to reply to this post.