editme.js

editme is a small jQuery plugin designed to make large forms more usable.

editme hides the input field, shows a nice labeled version of the data in the input field and adds an edit button.

Hiding input fields in forms

Sometimes a long form needs to have dynamic content.
If you have a list of users, you can edit them

In order to achive this, just have a list of input fields with the type text:

<div class="users">
  <input type="text" name="user[]" value="Jimmi Westerberg" />
  <input type="text" name="user[]" value="Buddy Carlson" />
  <input type="text" name="user[]" value="Steve Martin" />
  <input type="text" name="user[]" value="Babe Ruth" />
</div>

And add the following script:

<script type="text/javascript">
  $(document).ready(function() {
    $('ul.users input').editme();
  });
</script>

Save on the go!

Do you want the data to be saved on the fly? (AJAX and other buzzwords here)

Simply use the "autosave" option, with the function for saving the new data entered.

<script type="text/javascript">
  $(document).ready(function() {
    $('#save_me').editme({
      // REMEMBER dataToSave (call it what you want), else the data cannot be passed to your custom function
      'autosave': function(dataToSave) { 
        // implement any way of saving here... i'm using ajax post in this example
        $.post(
          'save_data.json',
          dataToSave,
          function(data) {
            // do whatever you want with the data returned
            // ...


            // REMEMBER TO CALL THIS METHOD!
            // else the display view is not shown and it will be stuck at the 
            // edit mode.
            $('#save_me').editme('saved');
          }
        );
      }
    });
  });
</script>

Options

You can easily customize the editme boxes and even add a remove link!

edittext : The text in the edit link. Default is "edit"
removetext : The text in the remove link. Default is "remove"
removeable : Show the remove link? Default is "false" (use booleans)
savetext : The text in the save button. Default is "save"
canceltext : The text in the cancel link. Default is "cancel"
autosave : Pass the function you want to use, if you want to save the data using ajax. The function should accept ONE parameter (the data to save). Example

"Nearly all options used"-example

<script type="text/javascript">
  $(document).ready(function() {
    $('#most_options').editme({
      'edittext':'Edit me!',
      'removetext': 'Delete this row',
      'removeable':true,
      'savetext':'Save for later...',
      'canceltext':'Oopsie, cancel!'
    });
  });
</script>

This will give the following editme field:

Completely styleable!

The editme script adds lots of HTML to give you a good impression. A lot of that has classes on them, for easier styling.

Example HTML output

<div class="editme" id="editme_container_0">
  <div class="editme_view_container" id="view_editme_container_0">
    <span class="data">Jimmi Westerberg</span>
    <span class="edit_link">
      [<a id="edit_link_edit_editme_container_0" class="ajaxlink">edit</a>]
    </span>
  </div>
  <div style="display: none;" class="editme_edit_container" id="edit_editme_container_0">
    <input type="text" value="Jimmi Westerberg" name="user[]">
    <input type="button" id="save_edit_editme_container_0" value="save">
    or <a id="cancel_edit_editme_container_0" class="ajaxlink">cancel</a>
  </div>
</div>