Sandbox: JavaScript

Enables all the form inputs of a form, allowing the user to edit it.

Example

In this example there are two triggers in use. enableForm and addClass; the former enables the specified inputs and the latter hides the related lock icon.

Unlock this form

<form method="get">
  <p>
    <a class="btn btn-default" data-trigger="enableForm addClass"
      data-enableform-options="
        'target': '!form'
      "
      data-addclass-options="
        'targets': '!form .unlocks',
        'class': 'hide'
      ">Unlock this form</a>
  </p>

  <div class="form-group">
    <input type="text" value="" disabled="disabled" class="form-control input-hg">
    <span class="input-icon fui-lock unlocks"></span>
  </div>


  <div class="form-group">
    <input type="text" value="I don't unlock" disabled="disabled" class="form-control input-hg" data-remain-locked="true">
    <span class="input-icon fui-lock"></span>
  </div>

  <div class="form-group">
    <select class="form-control" disabled="disabled">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <span class="input-icon fui-lock unlocks"></span>
  </div>

</form>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
target string ~ The selector to the form to enable.
inputSelector string 'input:not([data-remain-locked],
select:not([data-remain-locked],
textarea:not([data-remain-locked]'
The inputs to enable. By default, any input, select, or textarea that has a value for data-remain-locked will remain locked.