Jeff’s Austin Blues

More than one button on a HTML form is possible (e.g. Save and Cancel). The details are not obvious, but there are tutorials: Using multiple submit buttons on a single form and Multiple Submit Buttons in HTML. The key is using the same name attribute for each button but different value attribute values. The server can sort them out by value.

On AJAX forms, this doesn’t work. The browser sends all value attributes. Several Websites I use do this so it is possible. Digging around in them and watching the requests and responses with Firebug reveals some interesting things. Many of the Cancel buttons are purely client-side! No server request or response.

I’ve found out enough to do what I want, but this article is hardly complete. For the buttons after the first, use a different URL. A GET request would do what I want, so whether a POST would send the form contents is left as an exercise for the reader.

To build a browser side Cancel button for in-line (AJAX or remote) edit:

1. Give the content to be edited some enclosing tag with a unique ID, e.g. “task_123″. The server should change the style to “display: none“.
2. Insert the edit form after the element with ID “task_123″. Give it a unique name, e.g., “form_task_123″. Firefox at least will let you open up multiple in-line edits.
3. At the end of the form place tags like this:

   <input class="save" value="Save" name="commit" type="submit" />
   
   <input class="cancel" value="Cancel"
   
           onclick="Element.remove('form_task_123');
   
                 Element.show('task_123');"
   
           type="button"/>

4. Enjoy

Hope this is sufficient detail, if not you can look at the details in my Ruby on Rails app TagFlow hosted at RubyForge. Look at the inline_edit and inline_update actions the tasks controller and the associated RJS templates.