How to edit/save multiple fields at once using JQuery+JEditable?

Question

I have a set of texts on a page (for simplicity's sake, let's assume I have two), which I'd like to be editable individually, in place, so I'm using JEditable to achieve that and it works perfect - I click one text, it converts to a drop down, I change the value, click outside and it's saved. I click another, it converts to an input field, I type in something else, click outside of it - and it is also saved. Great.

Now I need to have a button (image, link - whatever), clicking on which would switch both of my editable fields to the editing mode. I.e., I click this "Edit" control, and now instead of my two texts I would see a drop-down and an input field, I would be able to edit values in both places, and then either click outside of both of them (ideal) or click another button/image/link, "Save" to, well, save it (not so good, but can live with that).

Is it possible to achieve? If so... how?

And no, I wouldn't want to use jqGrid or something similar here.

Answer 1

I'm working on something similar. You can create a custom input for jEditable, which can have multiple input fields.

This tutorial from the creator of jEditable does a decent job walking you through creating a time picker (which uses two dropdown inputs for hours and minutes). Here's another from someone else, but it seems a bit more confusing.

Like I say I'm working through this right now myself, might be able to give you more help when I get mine working.