How can I make a textbox readonly based on the customer's Area selected from a dropdown menu?

[Joseph Leger]

How can I modify customers' incident/request forms with an IF/ELSE statement that will either display a Readonly textbox, or an editable one based on the attribute "category" that the customer chooses from a dropdown menu?  I have tried using the script below with the following results: Any area name , such as Classified, entered in the  

          <PDM_IF "$args.category" == "Classified">

line will generate an editable textbox. If I replace the word Classified with "", then a readonly box appears. 

How can I make the box Readonly when the Area called "Classified" is selected?

 

<PDM_MACRO name=dtlHier hdr="Incident Area" attr="category" make_required="YES" autofill=yes common_name="ss_sym" evt="onChange=\\\"change_category_func('cr')\\\"" factory=pcat_cr_ss size=30>

 

<PDM_IF "$args.category" == "Classified">
<PDM_MACRO name=dtlReadonly hdr="Incident Description" attr="description">
<PDM_ELSE>
<PDM_MACRO name=dtlTextbox hdr="Incident Description (Do Not Enter Classified details or Attachments) " attr="description"  keeplinks=yes make_required=yes rows=8 size=80 spellchk=yes>
</PDM_IF>

[Legacy User]

hi,

this customizaiton could be done using JavaScript, hardest part is to make script know that the field has changed.

 

As category field is dtlLookup (actually dtlHier but they're pretty similiar) it's filling with 2 methods:

• autocomplete - when user types "Class%" and form autocompletes the name to "Classified";
• backfill - when user selects value from list opened in popup window;

 

Feels like you can simply specifiy event listner and attach it to your input like this:

onchange="zMakeDescriptionRO(this)"

But both methods completing field with value using JavaScript and this makes the main trouble because onchange event triggers only on manual value change (performed by human), so there is no guarantee that event will be triggered.

 

Here is 2 workaround how to achieve your goal:

1. correct way (that's my opinion ): you need modify out-of-the-box methods to make them trigger onchange event manually every time they change depended input, for SDM 12.9+ you may use trigger(): http://api.jquery.com/trigger/, for previous versions due to jq version you should use change(): http://api.jquery.com/change/. I think this way is correct but should keep your changes in mind when upgrading/patching SDM to keep your system up to date and all your customization valid.

 

2. easy way: you can define timeout and check your inputs every time it's trigger, solution also depending on jq version but overally it looks like:

function zMakeDescRO() {
     var zInterval = 1000; // 1 second
     var zTextBackup = "";
     var zCtgPrev = "";
     setTimeout(zCheckCtg, zInterval);
     function zCheckCtg() {
          if (zCtgPrev != jq("[pdmqa=KEY.category]").val())
               zCtgPrev = jq("[pdmqa=KEY.category]").val();
          else
               return;
          // checking that category name starting from Classified
          if (jq("[pdmqa=KEY.category]").val().indexOf("Classified") == 0) {
               zTextBackup = jq("[pdmqa=SET.description]").val();
               // and making description readonly and text is empty
               jq("[pdmqa=SET.description]").prop("readonly", true).val("");
          } else {
               // otherwise making it editable and restore prev text
               jq("[pdmqa=SET.description]").prop("readonly", false).val(zTextBackup);
          }
     }
}

ps: dont forget to add this func to body's onload area;

ps2: code not tested, use it at your own risk

 

Regards,

cdtj

[Jon_Israel]

@USARC_G6_SDM  - did Timur's reply help you out here?

[Joseph Leger]

It did help by giving me another direction to look into with jQuery.  I'm very new to scripting so I'll be working on this one for a while.  I do appreciate the help though, thanks.

[Joseph Leger]

Success,

I was able to have the free-text box, attachment button, and save button hide or appear based on the Area Selected by the Customer.

For instance, If a customer chooses to submit a new Inc/Req with the Area of "*CLASSIFIED*", than the text box and attachment buttons are hidden, any data entered already into the text box is overwritten, and an alert message pop-up appears on the customers screen.

 If the customer then changes the Area to something other than "*CLASSIFIED*", the text box and attachment button reappear.

 

If the customer has already selected the attachment button prior to choosing the Area of  "*CLASSIFIED*", than the SAVE button will disappear as well.

 

This was done by adding the following function:

//Change input options if Classified Area is chosen.
function myFunction() {
  setTimeout(myTimeout,800)
}
function myTimeout(){
  var x = document.getElementById("df_3_0").value;
  
     if (x == '*CLASSIFIED*' || x =='*classified*')
  {
    alert(x + ": " + "No free text is allowed for Classified Issues on this  Unclassified System.  Use the drop-down menu below to select the closest match for your issue."); //makes popup displaying Area chosen
  
       document.getElementById("df_5_0").innerHTML = "**WARNING - THIS IS A CLASSIFIED REQUEST OR INCIDENT - DO NOT EDIT WITH CLASSIFIED INFORMATION. DO NOT ATTACH DOCUMENTATION WITH CLASSIFIED INFORMATION.  USE DROPDOWN SELECTIONS ONLY!**";//adds required text to text box.
  
    document.getElementById("df_5_0").style.display = "none";//makes textbox disappear.
   
       document.getElementById("imgBtn3").style.display = "none";//makes attachment btn disappear.
  
   if (click !=0) // Hides Save button if an attachment has already been added. Ticket must be deleted.
   
   {document.getElementById("imgBtn0").style.display = "none";//hide Save button.
      
    alert(x + ": " + "PLEASE CANCEL OR CLOSE THIS TICKET WITHOUT SAVING. AN UNAUTHORIZED ATTACHMENT MAY HAVE BEEN SAVED TO THIS TICKET PRIOR TO BEING MARKED AS CLASSIFIED, AND CANNOT BE REMOVED!")
   }
  }
 else
 {    document.getElementById("df_5_0").style.display = "inline"; //brings text box back if *CLASSIFIED* area is changed to something else.
      document.getElementById("imgBtn3").style.display = "inline"//brings attachment btn back.
 } 
}

 

I also added the evt=" onblur=\\\"myFunction()\\\ to the Area select drop-down MACRO as seen below.

 

<PDM_MACRO name=dtlHier hdr="Incident Area" attr="category" autofill=yes common_name="ss_sym" evt="onChange=\\\"emp_change_category_func('cr')\\\" onblur=\\\"myFunction()\\\"" factory=pcat_cr_ss size=30>

 

 

That was one of my first scripts ever written so you'll have to forgive the ugliness of it, but it works.

Thanks again for the help,

Joe