Question

Forms - Javascript Callbacks on field rules?

Forms

Updated June 14, 2021

asked on June 7, 2021

Since field rules do not hide fields, they actually remove them, is there an option to set a callback for when a field rule adds a field to the form? This way we can run script on that field.

The user case is restricting selectable dates on a date field that is only added to the form when a field rule condition is met.

Right now I am waiting for 1 second after the condition is met because I found it takes time for a field rule to add the field to the form and I don't know when it is done.

0 0

Replies

replied on June 8, 2021 • Show version history

When a field is hidden with a field rule, its parent <li> has the classes "hidden" and "lf-container-hidden" applied to it, which cause it to not be displayed (display:none). The default display state is a 'list-item'.

I'm not sure if this is what you want, but the following JavaScript (see the below screenshot) will display alerts whenever the display status of the Field To Hide changes. You could use this as a starting point to carry out actions whenever a field's display status changes.

// Variables to hold current and previous display status
var previousViewStatus;
var currentViewStatus;

$( document ).ready(function() {
  
  // Field 3 is the dropdown list. There are field rules associated with values within this list to show/hide the Field to Hide.
$( "#Field3" ).change(function() {
  
  // Update previous state
previousViewStatus = currentViewStatus;
  
  // Update current state
  // q1 is the Field To Hide
  currentViewStatus = window.getComputedStyle(document.getElementById('q1')).getPropertyValue('display');
  
  // If the status have changed
  if (previousViewStatus != currentViewStatus)
  {
    // If current status is not displayed
    if (currentViewStatus == "none")
    {
      alert("Field is now hidden");
    }
    
    // If previous status was not displayed
    if (previousViewStatus == "none")
    {
      alert("Field is now displayed");
    }
  }
});  
});

0 0

replied on June 9, 2021

I am not having much luck with this. I am pretty sure the field does not exist if a field rule hides it, so the change method is not applying to anything. Here was my resulting code, which never even alerts the current status.

  $('.date-restrict-hiring').change(function() {
    previousViewStatus = currentViewStatus;
  
  // Update current state
  // q1 is the Field To Hide
  currentViewStatus = window.getComputedStyle(document.getElementById('q1')).getPropertyValue('display');
    alert(currentViewStatus);
  
  // If the status have changed
  if (previousViewStatus != currentViewStatus)
  {
    // If current status is not displayed
    if (currentViewStatus == "none")
    {
      alert("Field is now hidden");
    }
    
    // If previous status was not displayed
    if (previousViewStatus == "none")
    {
      alert("Field is now displayed");
    }
  }
  });

0 0

replied on June 9, 2021

Just making sure:

Is q1 the ID of the field that is being hidden/shown based on your field rule? If not then change it.

You can find the ID on the preview pane in the CSS and JavaScript tab:

If you've taken this step and it's still not working, can you tell me the field type of what you want to display and the .date-restrict-hiring field that is being changed?

0 0

replied on June 9, 2021 • Show version history

Oh I need to change the q1, I did not see that reference, but I don't remember seeing an "undefined" ~~posted to the console~~ alerted either. Will have to check when I get back in there.

0 0

replied on June 10, 2021 • Show version history

Another thing to double check is that the variables for previousViewStatus and currentViewStatus are global (created outside of the functions). I put them on line 2 and 3 for this reason.

You also need to make sure that the change function code is within a $( document ).ready(function() { });

0 0

replied on June 14, 2021 • Show version history

Well I tried this again without any luck. Here is my new code. However I have to click No on the rateChange object, then Yes to get the Alert below. If I just click Yes, I never get the alert and the calendar code does not run.

rateChange is a radio button input that is the condition of the field rule.

q25 is the calendar input

I made sure the variables are global

  $('.rateChange input').change(function() {
  
  // Update previous state
previousViewStatus = currentViewStatus;
  
  // Update current state
  // q1 is the Field To Hide
  currentViewStatus = window.getComputedStyle(document.getElementById('q25')).getPropertyValue('display');
  
  // If the status have changed
  if (previousViewStatus != currentViewStatus)
  {
    // If current status is not displayed
    if (currentViewStatus == "none")
    {
      
    }
    
    // If previous status was not displayed
    if (previousViewStatus == "none")
    {
      //Field is displayed
      alert('The field is displayed');
      $('.date-restrict-hiring input').datepicker("option", {beforeShow: checkField});
    }
  }
});

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - Javascript Callbacks on field rules?

Replies

Sign in to reply to this post.