Prevent Double Order Submissions with JQuery

Prevent double order submissions with JQuery. Use javascript to disable the ‘confirm order’ button on checkout_confirmation.php after submission, after it is clicked, and replace it with a message box complete with a spinner gif. Message box will match the Themeroller theme you are using.
None of the order processing programming is changed. The page will either proceed to checkout_success.php or refresh with error messages as normal. If the user has javascript disabled the button will function and display as usual.

Installation is simple. In OSCommerce 2.3 and OSC 2 CSS the required JQuery library, jquery-1.4.2.min.js is already in place.

All you need to do is the following:

  1. Add this to the stylesheet.css:
    .align_center{
    text-align: center;
    }

    .hide_msg{
    display: none;
    position: absolute;
    }

  2. On checkout_confirmation.php:

    about line 320, find:

    <div style="float: right;">
    <?php
    if (is_array($payment_modules->modules)) {
    echo $payment_modules->process_button();
    }
    echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'check', null, 'primary');
    ?>
    </div>

    Then:

    1. Add the id ‘confirm’ to the div like so:
      <div style="float: right;" id="confirm">

    2. Finally, just above that add:

      <!--msg box-->
      <script type="text/javascript">
      $(document).ready(function(){
      $('#confirm').click(function(){
      $('#confirm').hide();
      $('#order_submitted').removeClass('hide_msg');
      })
      })
      </script>
      <div id="order_submitted" class="hide_msg">
      <div class="ui-widget infoBoxContainer" style="float: right;">
      <div class="ui-widget-header infoBoxHeading">Order Submitted</div>
      <div class="ui-widget-content infoBoxContents">
      <p class="align_center">Please Wait while your order is processed.</p> <p class="align_center"><?php echo tep_image('ext/jquery/bxGallery/spinner.gif'); ?></p>
      </div>
      </div>
      </div>
    3. In OSC to CSS the spinner gif is in the images file, and called ‘loading.gif. Thus, change the path from ‘ext/jquery/bxGallery/spinner.gif’ to ‘images/loading.gif’ (or to where you have another suitable animated gif located).

      That’s it. Whenever someone submits an order, they will be unable to re-click the ‘confirm order’ button and cause a double submission of the order.

    Note:
    Ideally the javascript snippet (everything between the script tags above) would be placed within the head tags of the page checkout_confirmation.php, but in OSCommerce 2.3 this would require additional programming. If you place it within the head tags as 2.3 is currently written, then the snippet would appear in the head of all catalog pages. In OSC to CSS, however, you can easily do this, as each catalog page has it own closing head tag.