Javascript to Make a Section Read-Only

asked on January 22, 2019

I am looking to make an entire section read-only in certain circumstances but am having trouble getting the javascript correct. I have a section with a class of "section1" that I want to make read-only and here is what I have tried thus far.

$('.section1').attr('readonlysection','true');
$('.section1 div').attr('readonlysection','true');
$('.section1').attr('readonly','true');
$('.section1 div').attr('readonly','true');

I know when setting a field to read-only you have to also advise the specific type to set (e.g. "$('.ro input').attr('readonly','True');", so I am guessing that is what is missing but so far I have not been able to figure this out. Anyone had any luck in setting a section to read-only via javascript?

0 0

SELECTED ANSWER

replied on January 22, 2019

Beau,

First question, are you doing this via JavaScript because you need it to happen after user input? If not, then you're much better off using the read-only setting for the section in the layout designer.

Something to note is that some inputs, like radio buttons and drop downs, will still be editable even with the readonly attribute added, so you need to disable them as well.

The following code will do the job.

$('.section1 :input').attr({'readonly':true,'disabled':true});

the :input selector will catch all input types (input, textarea, select) and the adding the disabled attribute will keep the drop downs and radios uneditable.

However, you'll probably get errors if the fields are disabled when you go to submit, so you'll need to add another bit of code to remove that attribute before submission.

Something like

  $('.Submit').on('click',function(){
    $('.section1 :input').removeAttr('readonly disabled');
  });

If you don't have any drop downs or radio buttons, then it is much easier because you can leave out the disabled attribute and ignore the second piece of code.

One problem with the "Submit" action is that is would still remove the attributes even if a required field wasn't filled, so that could be a bit tricky.

4 0

replied on January 22, 2019

Jason,

Thanks for the response. The overall goal is to have a single form in a process and have all fields in a section be read-only at some approval steps and then editable at others. I understand we can make the whole form read-only at steps or have different versions of the form that we control this with but the goal is a single form that we can control at what approval steps the sections become editable. We are already capturing the current approval step and using that to hide/show fields via field rules. It would be nice if field rules also allowed you to make items read-only or not. The code you provided looks great and I'll let you know if we find any issues with it. Thanks a bunch for the help and the warnings on some of the errors we might run into!!!

0 0

replied on December 4, 2020

It would be nice if we could just update the section to be just as it is when we check the read-only box. The reason for this, like Beau was saying, is because Field Rules still do not include a read only option, only Show and Hide.

Sometimes a certain condition requires the information be shown but not edited.

If fields rules had Require and Read-Only in addition to Show and Hide, while also allowing access to buttons and system variables it would do away with about half of the basic scripting needs.

2 0

replied on September 14, 2021

Finding that if a user saves a draft, since they are not clicking a submit button, the values of the radio buttons are lost.

I tried acting on btn-primary but the button is outside of the form.

We really need read/write field rule options since javascript does not appear to be a stable solution.

0 0

Question

Question

Javascript to Make a Section Read-Only

Answer

Replies

Sign in to reply to this post.