Skip to content

June 10, 2009

1

Prototype/Ajax: workaround to serialize forms with multiple submit buttons

by Joe Kuan

PrototypeI have started learning to use Prototype (Javascript client framework) for a few days. So far I found it very good and saved me a lot of my work in developing webpages. Then I hit an existing bug when Prototype serializes a form with multiple submit buttons. Prototype always serializes the first submit button, even if you click the second button.

<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
screen1

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
screen2

Problem Solved.

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'];

I work for iTrinegy and here are my other Prototype blogs

1 Comment Post a comment
  1. MK
    Sep 19 2009

    THANKS A BILLION JOE KUAN!

    I just spend an hour thinking my brain had fallen out — I’m using perl-mason and prototype, new to both and could not figure out where the fault lay.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: