Submit Once Extension

9/4/2008

I personally hate the fact that double clicking on everything has become the norm for most people. That includes of course web forms... Can you tell with all of the extensions lately that I've been dealing with various forms at work? No? Oh well... Anyway, I've become quite annoyed at this issue and came up with a simple extender to fix it.

SubmitOnceExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.SubmitOnce.SubmitOnceBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.SubmitOnce
  11: {
  12:     [Designer(typeof(SubmitOnceDesigner))]
  13:     [ClientScriptResource("AJAXControls.SubmitOnce.SubmitOnceBehavior", "AJAXControls.SubmitOnce.SubmitOnceBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class SubmitOnceExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:     }
  20: }

SubmitOnceBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.SubmitOnce');
  17:  
  18: AJAXControls.SubmitOnce.SubmitOnceBehavior = function(element) {
  19:     AJAXControls.SubmitOnce.SubmitOnceBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._SubmittedValue = false;
  23: }
  24: AJAXControls.SubmitOnce.SubmitOnceBehavior.prototype = {
  25:     initialize: function() {
  26:         AJAXControls.SubmitOnce.SubmitOnceBehavior.callBaseMethod(this, 'initialize');
  27:  
  28:         // TODO: Add your initalization code here
  29:         Sys.UI.DomEvent.addHandler(this.get_element().form, 'submit',
  30:             Function.createDelegate(this, this._onsubmit));
  31:     },
  32:  
  33:     _onsubmit: function() {
  34:         if (!this._SubmittedValue) {
  35:             this.get_element().disabled = true;
  36:             this._SubmittedValue = true;
  37:             /*if (window.navigator.userAgent.indexOf("MSIE ")) {
  38:             this.get_element().form.submit();
  39:             }*/
  40:             return true;
  41:         }
  42:         return false;
  43:     },
  44:  
  45:     dispose: function() {
  46:         // TODO: Add your cleanup code here
  47:  
  48:         AJAXControls.SubmitOnce.SubmitOnceBehavior.callBaseMethod(this, 'dispose');
  49:     }
  50: }
  51: AJAXControls.SubmitOnce.SubmitOnceBehavior.registerClass('AJAXControls.SubmitOnce.SubmitOnceBehavior', AjaxControlToolkit.BehaviorBase);

All this does is simply disable a button after it has been clicked. It works with FireFox, IE, etc. It works in an UpdatePanel or out of it. It's fairly simple at that. All you need to do is set the TargetControlID to the button you want to be disabled after it's clicked and that's it. Anyway, hopefully this helps you out, so try it out, leave me some feedback, and happy coding.



Comments