Created: 2011-07-13 04:27
Updated: 2013-12-20 16:35


jQuery Changeable Plugin

Hide your form fields and make users edit by double-clicking a value label instead.

Example #1


<form id="my-form">
  <input type="text" name="username" value="User name" />


  $('form#my-form input').changeable();

Example #2 (with options)


<form id="my-form">
  <input type="text" name="username" value="User name" class="changeable" />
  <div class="notify-on-save">
      Looks like you've made som edits!
      <input type="submit" value="Click here to save">


    editBehaviour: 'click',
    helperText:    'Click to edit this field! Then click outside to save.',
    notifierClass: 'notify-on-save',
    saveOnEnter:   false


editBehaviour (default: 'dblclick')

Can be any event type (click, mouseover) that jQuery bind() handles.

helperText (default: 'Doubleclick to edit.')

The text that will be displayed when the mouse hovers over the value.

notifierClass (default: null)

A CSS class that will (initially be hidden) and showed when a user changes a field.

saveOnEnter (default: true)

Saves the field when the user presses enter key, if set to false enter will not do anything.


You may use this plugin for any non-commercial projects.

Please feel free to contact me if you want to use this in commercial projects.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more