Edit-in-place JavaScript for editing multiple fields at a time

Question

Could anyone recommend a JavaScript library or sample code for inline editing of multiple fields at the same time? I'm looking for something similar to Flickr, where when you click on either the name or description of a photo they both turn into texboxes and when the user clicks "save" both of them are saved.

I'm using jQuery, so a jQuery plugin would be nice, but not essential. I've already looked at https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery, but haven't found any that support multiple fields.

Answer 1

You can opt to not use a plugin. You can have something like: HTML:

<form>
  <table>
    <tr>
      <td>
        <span name="displayText">Text to edit1</span>
        <input type="text" name="editText" value="Text to edit1" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <span name="displayText">Text to edit2</span>
        <input type="text" name="editText" value="Text to edit2" style="display:none">
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="save" value="Save">
      </td>
    </tr>
  </table>
</form>

Then you can write a similar jQuery in $(document).ready():

$('span[name=displayText]').click(function() {
  $(this).hide();
  $('input[name=editText]', $(this).closest('td')).show();
});

You can of course style them as much as you like.

(P.S. Code is tested and WORKING!)

Answer 2

The editor by Joseph Scott works fairly well. Fairly customizable too due to the fact that everything is done with templates and CSS classes. See the demo here. (He did model this after FLickr.)

The Another In-Place Editor also looks promising also, although I have not tried it out myself.