Question

mark fields or section read only with javascript

Forms Version 10

Updated October 1, 2018

asked on January 23, 2018

Thanks to Jason Smith's help here I was able to get my form sections to hide based on which process step they were on by using Javascript to check a field. Now I need to know how to mark a section (or all the fields in that section) read only using Javascript. I'm not familiar with Javascript so I've just been trying different examples people have posted that relate to this but can't quite get it working. I've marked the section and all fields within the section with css class "section1RO". I've tried the following scripts and the best that happens is the text field will be readonly but not the radio, check mark or drop down fields.

If anyone knows what I can do with this script to get it working or where I can find resources that talk about the differences between test/radio/checkmark/dropdown fields and their attribute/properties?

$(document).ready(function() {
if ($('input[name="stepid"]').val() == "68") {
   $('.section2 input').click();
} else {
   $('.section2 input').prop('checked',false).change();
   $('.section1RO input').prop('readonly'); //with and without the input, with attr, with .val, and with/without , true.
}
});

0 0

Answer

SELECTED ANSWER

replied on January 23, 2018 • Show version history

Cassandra,

You could iterate through each input in the section by using the .each() method from jQuery. Additionally, I have a handy-dandy setReadOnly function I drop into most of my forms that takes an element input and a true/false input to add/remove read-only.

For example,

$(document).ready(function() {
  if ($('input[name="stepid"]').val() == "68") {
   $('.section2 input').click();
  } else {
   $('.section2 input').prop('checked',false).change();

   $('.section1RO input').each(function( i ) {
      setReadOnly(this,true);
  }
});

function setReadOnly(e,t){
    if(t){
        // Set input element to read-only
        e.attr({'readonly': 'True', 'backend-readonly': 'True'});
    } else {
        // Remove readonly from input element
        e.removeAttr('readonly backend-readonly');
    }
}

I'm not 100% sure, but sometimes you have to set disabled for radio and checkboxes. I would try this first to see what it catches and go from there.

0 0

View 1 previous reply

replied on January 23, 2018

Hi Jason,

I wasn't able to get this code to work. The "section1RO" class is actually set on all of the Section 1 fields so I created a new class only on the Section 1 section and changed line 07 to match that class but I couldn't get it to work. Then I tried changing 'readonly' on line 15 and 18 to 'disabled' (wasn't sure if I needed to change 'backend-readonly' to 'backend-disabled' as well?) but that was a no go too.

I was able to use this code to work but it's not as scalable as what you suggested. I'd really like to figure out what I'm doing wrong with the code you suggested as it would be much more helpful on scalable projects than what I have below.

if ($('input[name="stepid"]').val() == "68") {
   $('.section2 input').click();
} else {
   $('.section2 input').prop('checked', false).change();
   $('.section1RO input').attr('disabled', true);
   $('.section1RO textarea').attr('readonly', true);
}

0 0

replied on January 23, 2018

Okay, so the next question is what did not work exactly? Did it generate a JavaScript error, or did it fail to apply the read-only attribute, did it apply but not work, etc.

0 0

replied on January 24, 2018

Hi Jason,

The sections showed correctly but Section 1 is not being tagged read only.

Browser console shows this error:

This is the code I'm currently using:

$(document).ready(function() {
  if ($('input[name="stepid"]').val() == "68") {
    $('.section2 input').click();
  } else {
    $('.section2 input').prop('checked',false).change();
	 
    $('.theSection1 input').each(function( i ) {
      setReadOnly(this,true);
    });
  }
	 
function setReadOnly(e,t){
  if(t){
    // Set input element to read-only
    e.attr({'readonly': 'True', 'backend-readonly': 'True'});
  } else {
    // Remove readonly from input element
    e.removeAttr('readonly backend-readonly');
  }
}
});

0 0

replied on January 24, 2018

0 0

Replies

replied on January 29, 2018

Hi Jason,

We were able to get it working using this:

0 0

replied on January 29, 2018

Okay, so it looks like those types of inputs need the "disabled" attribute to be treated as read-only. That being the case, I would update the "remove read-only" portion of the code to also remove the disabled attribute otherwise it will not work correctly to make fields editable again.

0 0

replied on September 27, 2018 • Show version history

Hi Cassandra and Jason,

I posed the question on another post about how easy it is to remove the read-only attribute from the html and modify a value when I apply the read-only attribute using javaScript. Have you found that if the attribute is applied from within the 'Layout' tab of Forms (rather than javaScript), that the modified value is changed? Or is it kept safe?

Just curious about this. Thanks!

EDIT: I got confirmation that if you set read-only in the layout tab, the value does not get modified.

0 0

replied on September 27, 2018

I’m not sure what you mean, can you clarify “kept safe”?

if you change a value with JavaScript you have to trigger the change event to make sure the change sticks.

0 0

replied on October 1, 2018

"kept safe" = unmodified

0 0

replied on September 27, 2018

Hi Chris,

I just tested that on one of my forms where I'm using jquery to mark a field readonly. If I remove readonly and backend-readonly from the field via html, modify the value, and submit the form it does submit with the modified value. But if I remove readonly/backend-readonly from something set in the Layout tab it is still readonly and I am unable to edit the value.

Good question!

0 0

You are not allowed to follow up in this post.

Question

Question

mark fields or section read only with javascript

Answer

Replies

Sign in to reply to this post.