Question

Hide Fields specific to Forms user input

Forms Version 10 How To

Updated March 29, 2021

asked on March 29, 2021

This goes a little bit beyond what can be done via field rules. Basically, if three conditions are met then hide a radio button field and the submit button. Class names have been assigned to all radio buttons.

This is a jumbled mess of es6 and jquery. I thought it may be cleaner to assign a counter, if counter >=3 then run function to hide fields. This may work better with "if (operand && operand && operand)" but my jquery needs some serious work.

$(document).ready(function () {
  
  let conditionals = "0";
  
//Radio Button CSS class = iraType
//Choices value added = Inherited IRA
  $('.iraType input[value="Inherited IRA"]').click(function () {
    conditionals += 1;
  });
 
//Radio Button CSS class = requestType
//Choices value added = New Application
  $('.requestType input[value="New Application"]').click(function () {
    conditionals += 1;
  });
  
//Yes/No radio button
  $('.isContribution input[value="No"]').click(function () {
    conditionals +=1;
  });
  
//Function to hide radio button and submit button
  const hideClasses = () => {
  	$('.designateBeneficiaries').hide();
    $('.Submit').hide();
  }
  
//If all three conditions are met run function
  const isConditionMet = () => {
    if (conditionals >= 3) {
    	return hideClasses()
    }
  }

0 0

Answer

SELECTED ANSWER

replied on March 29, 2021

If you do want to do it with Javascript, here's one way to do it:

$(document).ready(function () {
    
  //When any of the three radio button fields is changed, call the showOrHideBeneficiaries function.
  $('.iraType').change(showOrHideBeneficiaries);
  $('.requestType').change(showOrHideBeneficiaries);
  $('.isContribution').change(showOrHideBeneficiaries);
  
  //This function reviews the values of the three radio button fields, and if they are the specifically
  //inidcated values, they will hide the fields with the designateBeneficiaries class, otherwise those
  //fields will be shown.
  function showOrHideBeneficiaries()
  {
    var iraType = $('.iraType input:checked').val();
    var requestType = $('.requestType input:checked').val();
    var isContribution = $('.isContribution input:checked').val();
    if(iraType == 'Inherited IRA' && requestType == 'New Application' && isContribution == 'No')
    {
      $('.designateBeneficiaries').each(function() {
        $(this).hide();
      });
    }
    else
    {
      $('.designateBeneficiaries').each(function() {
        $(this).show();
      });
    }    
  }
  
});

Bear in mind that there are benefits to using Field rules (like choosing whether or not to save the values when hidden, and ignoring required fields when hidden) that won't be addressed simply by hiding/showing the fields in Javascript.

1 0

Replies

replied on March 29, 2021

I love some good Javascript (probably more than most) but I think you can do this with Field Rules.

1 0

View 1 previous reply

SELECTED ANSWER

replied on March 29, 2021

If you do want to do it with Javascript, here's one way to do it:

$(document).ready(function () {
    
  //When any of the three radio button fields is changed, call the showOrHideBeneficiaries function.
  $('.iraType').change(showOrHideBeneficiaries);
  $('.requestType').change(showOrHideBeneficiaries);
  $('.isContribution').change(showOrHideBeneficiaries);
  
  //This function reviews the values of the three radio button fields, and if they are the specifically
  //inidcated values, they will hide the fields with the designateBeneficiaries class, otherwise those
  //fields will be shown.
  function showOrHideBeneficiaries()
  {
    var iraType = $('.iraType input:checked').val();
    var requestType = $('.requestType input:checked').val();
    var isContribution = $('.isContribution input:checked').val();
    if(iraType == 'Inherited IRA' && requestType == 'New Application' && isContribution == 'No')
    {
      $('.designateBeneficiaries').each(function() {
        $(this).hide();
      });
    }
    else
    {
      $('.designateBeneficiaries').each(function() {
        $(this).show();
      });
    }    
  }
  
});

1 0

replied on March 29, 2021 • Show version history

Now that I see it, it is so simple and makes so much sense. Your ease with JS makes mine look like such trash, but motivates me to get better! 😅

1 0

replied on March 29, 2021

Don't say that, your code was a good start. And you'll get there, it just takes practice.

0 0

You are not allowed to follow up in this post.

Question

Question

Hide Fields specific to Forms user input

Answer

Replies

Sign in to reply to this post.