Make 2 fields read only depending on dropdown selection

replied on November 6, 2023

Here's one one to do it...

This is tested on the Classic Designer Version 11.0.2307.40547

Note that if you are wanting to use the Modern Designer - on version 11.0.2212 or later, this is much easier to do using Field Rules.

Give your "Order Status" drop-down field a class name of mySourceField.

Give the drop-down and datetime fields in the table the class name of myTargetField.

Add this Javascript to your form:

$(document).ready(function() {
  
  //Run the Function when the form is loaded (using existing values).
  MyReadOnlyFunction();
  
  //Run the Function when the source field is modified.
  $('.mySourceField').change(MyReadOnlyFunction);
  
  //Function to make fields readonly based on the status of another field.
  function MyReadOnlyFunction() {
    if($('.mySourceField select').val() == 'Delivered' || $('.mySourceField select').val() == 'Canceled') {
      $('.myTargetField').each(function() {
        $(this).find('input').attr('readonly', true);
        $(this).find('select').attr('readonly', true);
      });
    }
    else {
      $('.myTargetField').each(function() {
        $(this).find('input').removeAttr('readonly');
        $(this).find('select').removeAttr('readonly');
      });
    }
  }
  
});

1 0

replied on November 6, 2023

It is still the same as it was. Do you think it is not working as the data in the table is being populated by a stored procedure based on the dropdown field?

0 0

replied on November 8, 2023

I have a question is the order status outside of the table a filter? If so I think I would personally base it on the one in the table instead.

0 0

replied on November 8, 2023 • Show version history

Here is what I did to get it working. In the code below, the function runs when the Status field in the table changes.

A few things to note:

Select fields need to use the 'disabled' attribute because 'readonly' does not keep the user from clicking in the field and changing the value.
I use CSS based on the 'readonly' attribute so I also updated the select classes 'readonly' attribute. This way the CSS for readonly/disabled selects still runs. You will not need to do this.
Each of the Date field parts/objects need targeted.
I also hide and show the date picker icon.
Because you are using a lookup to fill the table, it may be better to call the function "setTableFieldReadOnly()" when when the lookup is finished running, instead of on the change event for the select.
- This is why I added in the empty calls to "onloadlookupfinished" and "lookupcomplete". So you have them ready to switch to if needed.
- I am not sure if this would be better or not, but it's worth thinking on. Because otherwise the function will be called as each row is added instead of once after the lookup is done running.

$(document).ready(function(){
  
  function setTableFieldReadOnly(){
    
    /* loop through the table */ 
    $('.theTableClass tbody tr').each( function() {
      /* set default values */
      let currSelectField = $(this).find('.theSelectClass select');
      let currSelectClasseValue = currSelectField.val();
      let currDateInputField =  $(this).find('.theOtherFieldClass div.cf-date-field-date input') ;
      let currTimeInputField = $(this).find('.theOtherFieldClass div.cf-date-field-time input') ;
      let currTimeSelectField = $(this).find('.theOtherFieldClass div.cf-date-field-time select') ;
      
      if (currSelectClasseValue=='Delivered'||currSelectClasseValue=='Canceled'){
        $('.theOtherFieldClass .ui-datepicker-trigger').hide(); 
        currSelectField.attr('disabled', true);  
        currSelectField.attr('readonly', true);
        currDateInputField.attr('readonly', true);  
        currTimeInputField.attr('readonly', true);  
        currTimeSelectField.attr('disabled', true);  
        currTimeSelectField.attr('readonly', true);  
        
      }
      else{
        $('.theOtherFieldClass .ui-datepicker-trigger').show();
        currSelectField.removeAttr('disabled');
        currSelectField.removeAttr('readonly');
        currDateInputField.removeAttr('readonly');     
        currTimeInputField.removeAttr('readonly'); 
        currTimeSelectField.removeAttr('disabled'); 
        currTimeSelectField.removeAttr('readonly'); 
      };
    }); /* END: table loop */
    
  }; /*END: function setTableFieldReadOnly() */ 
  
  /* when the select value changes */     
  $('.theSelectClass select').change(function(){   
    
    setTableFieldReadOnly();
  });  
  
  /* when the lookup process finishes the first time */ 
  /* This happens even when there are no lookups     */
  $(document).on("onloadlookupfinished", function () {
    
    /* page load code here */   
 
  });

  /* whenever a lookup finishes reloading after the first time              */
  /* collections and tables with lookup filled fields cause this to trigger */
  /* as well as cascading lookups that the uer triggers. Such as when they  */
  /* select a name from a drop down                                         */
  $(document).on("lookupcomplete", function (event) {
    
  });
  
}); /* END: $(document).ready (function () */

The 'readonly' CSS we use but you don't need. ;)

/* Formats the Read-Only and disabled radio and checkbox fields */
.cf-formwrap input[readonly] {background-color: #ffffff !important;border: 0px solid;}
.cf-formwrap textarea[readonly] {background-color: #ffffff !important;border: 0px solid;}
.cf-formwrap select[readonly] {background-color: #ffffff !important;color:#000000 !important; border: 0px solid; -webkit-appearance:none;} 
.cf-formwrap input[type="checkbox"][disabled]:not(:checked)+label{ color: #D5D5D5; }
.cf-formwrap input[type="radio"][disabled]:not(:checked)+label{ color: #D5D5D5; }

0 0

Question

Question

Make 2 fields read only depending on dropdown selection

Replies

Sign in to reply to this post.