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 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 read-only using JS.

//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:

  1. 2 buttons which are Set Readonly and Remove Readonly are added.
  2. It directly sets or removes the readonly attribute on all input fields and selects when the corresponding button is clicked.
  3. It uses localStorage to store the readonly state, so even if the page is refreshed, the readonly state will persist until removed.
  4. It initializes the readonly state based on the localStorage value when the page loads.
<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

app_kb_dx8_setReadOnlySample.jwa


  • No labels