Prototype/Ajax: workaround to serialize forms with multiple submit buttons
<form onsubmit='alert($(this).serialize()); return false;' action=#> <input type=text value='Joe'> <input type=submit name=submit value='Save' /> <input type=submit name=submit value='Exit' /> </form>
If you click the Exit button, you get
Unfortunately, the bug hasn’t been fixed yet and there is a work around posted in prototype.lighthouse.com. However, that seems a bit convoluted to me for a simple problem.
Here is a simpler workaround. All you need is an extra hidden field and onclick calls to record the button action.
<form onsubmit='alert($(this).serialize()); return false;' action=#> <input type=hidden name=m_submit value=''/> <input type=text value='Joe'/> <input type=submit name=submit value=Save onclick='this.form.m_submit.value = this.value;' /> <input type=submit name=submit value=Exit onclick='this.form.m_submit.value = this.value;' /> </form>
When you click the Exit button, you get
So on the server side, you can examine m_submit value to distinguish what action has been submitted. Alternatively, you can do the following before calling Ajax.Request or Ajax.Updater. So that you don’t need to change the server side script.
var obj = $('form').serialize(true); obj['submit'] = obj['m_submit'];