| Table of Contents |
|---|
How To
We can simply add a "readonly" attribute to each of the element within a page. For example:
Add a custom HTML form element into a form. 
Figure 1: Add custom HTML
The logic for setting form element fields readonly
The following script shows how to set each corresponding form field to readonly using JS.
| Code Block |
|---|
//For text field $("input").prop('readonly', true); //For form field such as radio button $("input").prop('disabled', true); //For select box form field |
...
$( |
...
"select").prop(' |
...
disabled', true); |
...
//For form grid and spreadsheet
$(".formgrid, .spreadsheet").addClass("readonly"); |
Example Implementation
The script is used to set or remove readonly of all form fields in a form.
The script does the following:
- 2 buttons which are Set Readonly and Remove Readonly are added.
- It directly sets or removes the readonly attribute on all input fields and selects when the corresponding button is clicked.
- It uses localStorage to store the readonly state, so even if the page is refreshed, the readonly state will persist until removed.
- It initializes the readonly state based on the localStorage value when the page loads.
| Code Block |
|---|
<div class="btn btn-primary" id="readOnlyButton">Set Readonly</div>
<div class="btn btn-secondary" id="removeReadOnlyButton">Remove Readonly</div>
<script>
$(document).ready(function(){
// Function to set input fields readonly
function setInputFieldsReadonly() {
$("input" |
In this example, it will select all input elements inside the #field1_1_t4197DataForm_section1 container and set their readonly property to true, effectively making them readonly.
#field1_1_t4197DataForm_section1
field1 = Multipaged Form ID
1 = Page No
t4197DataForm = Target Form ID
...
).prop('readonly', true);
|
...
$("input").prop('disabled', true); |
...
$("select").prop('disabled', true); |
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
$( |
...
".formgrid, .spreadsheet").addClass("readonly"); |
...
...
|
...
|
...
}
|
...
// Function to remove readonly attribute from input fields |
...
...
|
...
|
...
function removeInputFieldsReadonly( |
...
) {
|
...
$("input").prop('readonly', false); |
...
$("input").prop('disabled', false); |
...
$("select").prop('disabled', false); |
...
$(".formgrid, .spreadsheet").removeClass("readonly"); |
...
}
// Button click event to set input fields readonly
$("#readOnlyButton").click(function(){
setInputFieldsReadonly();
localStorage.setItem('readonly', 'true');
});
// Button click event to remove readonly attribute from input fields
$("#removeReadOnlyButton").click(function(){
removeInputFieldsReadonly();
localStorage.removeItem('readonly');
});
// Check if readonly state is stored in local storage
if(localStorage.getItem('readonly') === 'true') {
setInputFieldsReadonly();
}
});
</script> |
Example Result
Set Readonly
Figure 1: Set Readonly
Remove Readonly
Figure 2: Remove Readonly
Sample App
| View file | ||||
|---|---|---|---|---|
|