| Table of Contents |
|---|
Introduction
This article discusses how to set the form elements of the pages in a multi-paged form to read only with JavaScript. This feature can be used in achieving requirements such as form previewing.
How To
Add a custom HTML form element into to a form. 
Figure 1: Add custom HTML
The logic for setting form element fields
...
read-only
The following script shows how to set each corresponding form field to readonly read-only 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.
...
| 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").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 | ||||
|---|---|---|---|---|
|
...