How to set form elements to read-only using JavaScript

Introduction

This article discusses how to set the form elements of pages in a multi-page form to read-only using JavaScript. This feature can be used in achieving requirements such as form previewing.

How does it work?

1. In Form Builder, add a Custom HTML form element to a form.
2. Add the script from the Example Implementation section.
   

The logic for setting form element fields to read-only

The following script shows how to set each corresponding form field to read-only using JavaScript.

//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 following script expands this functionality and is used to set or remove read-only for 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 read-only 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.

Use the following script in the Custom HTML field.

<div class="btn btn-primary" id="readOnlyButton">Set Readonly</div>
<div class="btn btn-secondary" id="removeReadOnlyButton">Remove Readonly</div>

<script>
    $(document).on('page_loaded', function(){

        // Button click event to set input fields readonly and store the page number in local storage
        $("#readOnlyButton").click(function(){
            var pageNo = getCurrentPageNumber();
            var readOnlyPages = JSON.parse(localStorage.getItem('readOnlyPages')) || [];

            if (readOnlyPages.indexOf(pageNo) === -1) {
                toggleInputsReadOnly(true);
                readOnlyPages.push(pageNo);
                localStorage.setItem('readOnlyPages', JSON.stringify(readOnlyPages));
            }
        });

        // Button click event to remove readonly attribute from input fields and update local storage
        $("#removeReadOnlyButton").click(function(){
            var pageNo = getCurrentPageNumber();
            var readOnlyPages = JSON.parse(localStorage.getItem('readOnlyPages'));

            var index = readOnlyPages.indexOf(pageNo);
            if (index !== -1) {
                toggleInputsReadOnly(false);
                readOnlyPages.splice(index, 1);
                localStorage.setItem('readOnlyPages', JSON.stringify(readOnlyPages));
            }
        });
        
        function getCurrentPageNumber() {
            const currentPage = document.querySelector('.page.current');
            if (!currentPage) return null;
        
            const classes = currentPage.className.split(' ');
            for (const cls of classes) {
                const match = cls.match(/^page_(\d+)$/);
                if (match) {
                    return parseInt(match[1], 10);
                }
            }
            return null;
        }
        
        function toggleInputsReadOnly(status) {
            var page = $('.page.current');
            
            $('input:not([type=hidden]), select, textarea, button', page)
                .prop('disabled', status)
                .prop('readonly', status);
            
            $(".formgrid, .spreadsheet", page).toggleClass("readonly", status);
        }
        
        function pageLoaded() {
            var pageNo = getCurrentPageNumber();

            var readOnlyPages = JSON.parse(localStorage.getItem('readOnlyPages')) || [];
        
            // Always disable inputs if this page is in read-only list
            if (readOnlyPages.includes(pageNo)) {
                toggleInputsReadOnly(true);
            }
        }
        
        pageLoaded();
    });
</script>

Expected outcome

The elements are set to read-only as demonstrated in the video below.

The following video demonstrates removing read-only.

Download sample app