Often, you’ll want to prevent impatient users from clicking a submit button multiple times, as you can end up with multiple actions taking place, or object state can get in a bad way leading to errors. For this example we’ll assume you have a final Submit Order form that actually places the order, auth’s the credit card, etc…
You can’t simply disable the submit button onclick with ATG as typically the submit button is the input field that actually activates the handle method. I tried a bunch of things, before I was able to get something working, so I wanted to share that here.
First thing is to write some javascript that will handle all of the magic (this example uses jQuery):
Second, you need to move the input that calls the correct handle method out of the submit button and into a hidden form field:
Thirdly you’ll want to replace the submit input with a submit <a> which will call your javascript:
<a href="javascript:submitform()" id="commitOrderButton">
<img src="/myapp/img/button/submitOrder.gif" alt="Submit Order" border="0" class="submitOrder" />
</a>
And that’s it.
Would you not recommend using the synchronized attribute of the dsp:form tag instead?
Brett:
the synchronized attribute is for managing form submissions to session and global components, preventing multiple form submissions from hitting the component at the same time.
It doesn’t solve the problem of multiple submit clicks on a request scoped form handler, as each click can create a new request scope.
At least that’s my understanding.
Devon
But if you do that, if the user has javascript turned off, the form is not submitted at all (and that’s not a rare case, with Firefox plugins like “NoScript”).
I would complement it with a <noscript> block:
<noscript>
<dsp:input bean=”CommitOrderFormHandler.commitOrder” type=”img” src=”/myapp/img/button/submitOrder.gif” />
</noscript>
regards,
Gustavo
Very good point!!!
I’m used to sites which require JS to perform most of the site actions.