Tuesday, February 20, 2007

Double Submit Fix with Multiple Submit Buttons

In the LEAD Portal we have a portlet that allows users to submit weather forecast workflows. When the user clicks the Launch button, a lot of things have to go on behind the scenes to setup and launch the workflow, and it's not atypical for a user to wonder if maybe something is amiss and attempt to click the Launch button again. This double submit is quite problematic for us however.

I searched the web for a double submit prevention JavaScript code, and found some good starts. But our portlet has multiple submit buttons and I found that if I disabled the Launch button after it is clicked, for some reason, that buttons name and value are not passed in the POST to the server. So I have to account for this. Here's the JavaScript I used:

<form action="${actionURL}" method="POST" name="wfParamForm">
<div align="right">
<input type="submit"
name="actionMethod_doExp_wiz" value="<>
<input type="submit"
name="actionMethod_doExp_wiz" value="Next >" disabled="yes" />
<input type="submit"
name="actionMethod_doExp_wiz" value="Cancel" />

<!-- since we have multiple submit buttons, we need to add the
name value pair of this submit button to the form action. It
seems that when the button is disabled that this also prevents
it from being present in the POST -->
<input type="submit"
name="actionMethod_doExp_wiz" value="Launch"
onClick="this.disabled=true; this.value='Please wait...'; this.form.action=this.form.action + '&actionMethod_doExp_wiz=Launch'; this.form.submit()" />

This is from a Velocity Portlet, and it is creating a wizard like interface with Back, Next, Cancel, and Launch buttons on each page of the wizard. Look at the JavaScript for the onClick for the Launch button. Pretty standard stuff (sets the Launch button to disabled, displays "Please wait.." in the button), except that it is also adding the name value pair of the Launch button to the form action. This works and has been tested with IE and Firefox.