patternfly/tests/pages/_includes/widgets/forms/inline-edit-for-form.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

<form class="form-horizontal" role="form">
  <div class="form-group" id="name-field">
    <label class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10 form-control-pf-editable">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Name: </span>
        <span>Mike</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <div class="form-control-pf-textbox">
        <input type="text" value="Mike" class="form-control form-control-pf-editor" autocomplete="off" aria-label="name"/>
        <button type="button" class="form-control-pf-empty" aria-label="Clear Value">
          <span class="fa fa-times-circle fa-lg"></span>
        </button>
      </div>
      <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
      <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
  </div>
  <div class="form-group" id="gender-field">
    <label class="col-sm-2 control-label">Gender</label>
    <div class="col-sm-10 form-control-pf-editable">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Gender: </span>
        <span>Male</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <select class="selectpicker form-control-pf-editor" autocomplete="off" aria-label="gender">
        <option>Male</option>
        <option>Female</option>
      </select>
      <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
      <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
  </div>
  <div class="form-group" id="depart-field">
    <label class="col-sm-2 control-label">Department</label>
    <div class="col-sm-10 form-control-pf-editable">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Department: </span>
        <span>UXD</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <select class="form-control combobox form-control-pf-editor" autocomplete="off" aria-label="department">
        <option value="accounting">Accounting</option>
        <option value="automic">Automic</option>
        <option value="certification">Certification</option>
        <option value="devops">DevOps</option>
        <option value="entitlement">Entitlement</option>
        <option value="epm">EPM</option>
        <option value="git">GIT</option>
        <option value="gws">GWS</option>
        <option value="hr">HR</option>
        <option value="jboss">JBOSS</option>
        <option value="kernel">Kernel</option>
        <option value="kvm">KVM</option>
        <option value="legal">Legal</option>
        <option value="nfv">NFV</option>
        <option value="openshift">Openshift</option>
        <option value="qe">QE</option>
        <option value="rhu">RHU</option>
        <option value="sales">Sales</option>
        <option value="uxd" selected="selected">UXD</option>
        <option value="virt">Virt</option>
      </select>
      <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
      <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
  </div>
  <div class="form-group" id="hiredate-field">
    <label class="col-sm-2 control-label">Hiredate</label>
    <div class="col-sm-10 form-control-pf-editable">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Hiredate: </span>
        <span>03/13/2013</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <input type="text" class="bootstrap-datepicker form-control form-control-pf-editor" value="03/13/2013" autocomplete="off" aria-label="hiredate"/>
      <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
      <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
  </div>
  <div class="form-group" id="interests-field">
    <label class="col-sm-2 control-label">Interests and hobbies</label>
    <div class="col-sm-10 form-control-pf-editable">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Interests and Hobbies: </span>
        <span>cooking, fishing, sports, travel</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <select class="selectpicker form-control-pf-editor" multiple autocomplete="off" aria-label="interests and hobbies">
        <option selected="selected">Cooking</option>
        <option>Drama</option>
        <option selected="selected">Fishing</option>
        <option>Fitness</option>
        <option>Literature</option>
        <option>Movie</option>
        <option>Music</option>
        <option>Painting</option>
        <option selected="selected">Sports</option>
        <option selected="selected">Travel</option>
      </select>
      <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
      <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
  </div>
  <div class="form-group" id="profile-field">
    <label class="col-sm-2 control-label">Personal profile</label>
    <div class="col-sm-10 form-control-pf-editable form-control-pf-full-width">
      <span class="spinner spinner-sm"></span>
      <button type="button" class="form-control-pf-value">
        <span class="sr-only">Edit Personal Profile: </span>
        <span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
        <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
      </button>
      <textarea class="form-control form-control-pf-editor" autocomplete="off" aria-label="personal profile">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea>
      <div class="action-buttons">
        <button type="button" class="btn btn-primary form-control-pf-save" disabled aria-label="Save"><i class="glyphicon glyphicon-ok"></i></button>
        <button type="button" class="btn btn-default form-control-pf-cancel" aria-label="Cancel"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
</form>
<script type="text/javascript">
  $(function() {

    $('.combobox').combobox();

    $('.bootstrap-datepicker').datepicker({
      autoclose: true,
      todayBtn: 'linked',
      todayHighlight: true
    })
    .on('changeDate', monitorValueChange);

    $('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker').each(function () {
      var $this = $(this);
      $this.data('old-value', $this.val());
    });

    function monitorValueChange (e) {
      var $editor = e.target ? $(e.currentTarget) : e;
      var $field = $editor.closest('.form-control-pf-editable')
      var $save = $field.find('.form-control-pf-save');
      if ($editor.is('[multiple]')) {
        var oldValues = $editor.data('old-value');
        var newValues = $editor.val();
        $save.attr('disabled', (oldValues.length === newValues.length) &&
          oldValues.every(function (el, i) { return el === newValues[i]; }));
      } else if ($editor.is('.combobox')) {
        var newOption = $editor.val().trim().toLowerCase();
        var options = $field.children('.form-control-pf-editor').find('option').map(function() { return $(this).text().toLowerCase(); });
        $save.attr('disabled', $editor.data('old-value').toLowerCase() === newOption ||
          (newOption !== '' && $.inArray(newOption, options) === -1));
      } else if ($editor.is('.bootstrap-datepicker')) {
        $save.attr('disabled', !moment($editor.val().trim(), 'MM/DD/YYYY', true).isValid() ||
          $editor.data('old-value') === $editor.val().trim());
      } else {
        $save.attr('disabled', $editor.data('old-value') === $editor.val().trim());
      }
    }

    function cancelEdit ($field) {
      var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
      var $status = $field.find('.status');
      if ($editor.is('.selectpicker')) {
        $editor.selectpicker('val', $editor.data('old-value'));
      } else if ($editor.is('.bootstrap-datepicker')) {
        $editor.datepicker('update', $editor.data('old-value'));
      } else {
        $editor.val($editor.data('old-value'));
      }
      $field.find('.form-control-pf-save').attr('disabled', true);
      $status.removeClass('spinner spinner-xs spinner-inline').addClass('fa fa-lg fa-times-circle');
      $field.removeClass('form-control-pf-edit');
    }

    function triggerEdit (e) {
      if ($('.form-control-pf-editable.form-control-pf-edit').length) {
        cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
      }
      var $field = $(e.delegateTarget);
      var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
      $field.addClass('form-control-pf-edit');
      if ($editor.is('.selectpicker')) {
        $field.find('.dropdown-toggle').focus();
      } else if ($editor.is('.combobox')) {
        $field.find('.combobox-selected .form-control-pf-editor').select();
      } else if ($editor.is('.bootstrap-datepicker')) {
        $editor.select();
      } else {
        $editor.focus().val('').val($editor.data('old-value'));
        if ($editor.is('textarea')) {
          $editor.scrollTop($editor[0].scrollHeight - $editor.height());
        }
      }
    }

    $('.form-control-pf-editable').on('click', '.form-control-pf-value', triggerEdit);

    $('.form-control-pf-editable').on('keyup', '.form-control-pf-value', function (e) {
      if (e.which === 13) {
        triggerEdit(e);
      }
    });

    $(window).on('click', function (e) {
      if ($('.form-control-pf-editable.form-control-pf-edit').length && !$(e.target).closest('.form-control-pf-editable.form-control-pf-edit').length) {
        cancelEdit($('.form-control-pf-editable.form-control-pf-edit'));
      }
    });

    $('.form-control-pf-editable').find('input.form-control-pf-editor, textarea.form-control-pf-editor').on('keyup', monitorValueChange);

    $('.form-control-pf-editable').find('.combobox-container')
    .on('click', '[data-dropdown]', function (e) {
      if (!$(e.currentTarget).find('.glyphicon-remove').is(':visible')) {
        monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
      }
    })
    .on('click', '[data-value]', function (e) {
      monitorValueChange($(e.currentTarget).parent().siblings('.form-control-pf-editor'));
    });

    $('.form-control-pf-editable').on('change', '.selectpicker', monitorValueChange);

    $('.form-control-pf-editable').on('click', '.form-control-pf-empty', function (e) {
      $(e.delegateTarget).find('.form-control-pf-editor').val('').focus();
      monitorValueChange($(e.currentTarget).siblings('.form-control-pf-editor'));
    });

    $('.form-control-pf-editable').on('click', '.form-control-pf-save', function (e) {
      var $field = $(e.delegateTarget), newValue, newText;
      var $editor = $field.find('input.form-control-pf-editor, textarea.form-control-pf-editor, .selectpicker');
      if ($editor.is('.selectpicker')) {
        newValue = $editor.val();
        if ($editor.is('[multiple]')) {
          newText = newValue.join(', ');
        } else {
          newText = newValue;
        }
      } else {
        newText = newValue = $editor.val().trim();
      }
      $editor.data('old-value', newValue);
      if ($editor.is('textarea, :input:not(.combobox):not(.bootstrap-datepicker)')) {
        $editor.val(newValue);
      }
      $field.removeClass('form-control-pf-edit').addClass('form-control-pf-updating').find('.form-control-pf-value').children('span:not(.sr-only)').text(newText);
      $field.find('.form-control-pf-save').attr('disabled', true);
      setTimeout(function() {
        $field.removeClass('form-control-pf-updating');
      }, 1000);
    });

    $('.form-control-pf-editable').on('click', '.form-control-pf-cancel', function (e) {
      cancelEdit($(e.delegateTarget));
    });

  });
</script>