Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
Table of Contents |
---|
This article discusses how to set the form elements of the pages in multi-paged form to read only with JavaScript. This feature can be used in achieving requirements such as form previewing.
Add a custom HTML form element into a form.
Figure 1: Add custom HTML
...
The script does the following:
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> |
...
Figure 2: Remove Readonly
View file | ||||
---|---|---|---|---|
|