Preventing Multiple Submits On An ATG Form

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):

<script language=”JavaScript”>function submitform(){$(‘#commitOrderButton’).attr(“href”,”#”);document.myFormsName.submit();}</script>

Second, you need to move the input that calls the correct handle method out of the submit button and into a hidden form field:

<dsp:input bean=”CommitOrderFormHandler.commitOrder” value=”submit” type=”hidden”>
</dsp:input>

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.


Posted

in

by

Comments

4 responses to “Preventing Multiple Submits On An ATG Form”

  1. Brett Wilson Avatar
    Brett Wilson

    Would you not recommend using the synchronized attribute of the dsp:form tag instead?

  2. Devon Avatar

    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

  3. gux Avatar

    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

  4. Devon Avatar

    Very good point!!!

    I’m used to sites which require JS to perform most of the site actions.

Leave a Reply

Your email address will not be published. Required fields are marked *

PHP Code Snippets Powered By : XYZScripts.com