Disabling and Enabling all Dynaform fields

From pmusers
Jump to: navigation, search

JavaScript code can be used to enable or disable all fields in a Dynaform. The following example shows how to create a button which will toggle all fields in a Dynaform from edit mode to disabled mode.


Dynaform: Change Form to Edit Mode.json (right click and select Save Link As)
Author: Amos Batto (amos[at]processmaker.com>
Version: 1.0 (2019-07-10)
Tested in: PM 3.3.8 Community with Firefox 60.5


Create a Dynaform with input fields and a button whose ID is "editMode". Set the Dynaform's mode property to "disabled".

ChangeFormEditMode InDesigner.png

Then, add the following JavaScript to the Dynaform:

//function to toggle all fields in Dynaform to disabled/enabled:
function toggleEditMode() {
  //if the first input field (that isn't a submit button) is enabled, then disable all fields: 
  if ($("input[type!=submit]").eq(0).prop("disabled") === false) {
        
    //add .pmdynaform-control-button and .pmdynaform-control-submit if needed
    $(".pmdynaform-control-text,.pmdynaform-control-textarea,.pmdynaform-control-dropdown,.pmdynaform-control-suggest,"+
      ".pmdynaform-control-checkbox,.pmdynaform-control-checkgroup,.pmdynaform-control-radio,.pmdynaform-control-datetime,"+
      ".pmdynaform-control-file,.btn-uploadfile").prop("disabled", true);
    $("#editMode").setLabel("Edit");
  }
  else { //if fields are disabled, then enable all fields:
    
    $(".pmdynaform-control-text,.pmdynaform-control-textarea,.pmdynaform-control-dropdown,.pmdynaform-control-suggest,"+
      ".pmdynaform-control-checkbox,.pmdynaform-control-checkgroup,.pmdynaform-control-radio,.pmdynaform-control-datetime,"+
      ".pmdynaform-control-file,.btn-uploadfile").prop("disabled", false);
    $("#editMode").setLabel("Disable");
  } 
}

$("#editMode").find("button").click( toggleEditMode );

When the Dynaform is displayed, its fields will be disabled by default, and the button will have the label "Edit".

ChangeFormEditMode DisabledFields.png

When the user clicks on the "Edit" button, all the fields will be enabled for editing and the button's label will change to "Disable":

ChangeFormEditMode EnabledFields.png