Form Clear Extender

7/22/2008

I've been building a lot of forms lately and every single one of them has required a clear button of some description (and not a reset, I'm talking a complete clearing of the form). To be honest, I was sort of sick of writing code to clear each of the forms and I didn't want to add in an extra javascript file to do the work (mainly because I never remember what I called the function and have to look it up constantly). Anyway, to combat this annoyance, I created a new extender for the sole purpose of clearing a form.

FormClearExtender.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.FormClear.FormClearBehavior.js", "text/javascript")]

9:

  10: namespace AJAXControls.FormClear

  11: {

  12:     [Designer(typeof(FormClearDesigner))]

  13:     [ClientScriptResource("AJAXControls.FormClear.FormClearBehavior", "AJAXControls.FormClear.FormClearBehavior.js")]

  14:     [TargetControlType(typeof(Control))]

  15:     public class FormClearExtender : ExtenderControlBase

  16:     {

  17:         // TODO: Add your property accessors here.

  18:         //

  19:     }

  20: }

FormClearBehavior.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.FormClear');

17:

  18: AJAXControls.FormClear.FormClearBehavior = function(element) {

  19:     AJAXControls.FormClear.FormClearBehavior.initializeBase(this, [element]);

20:

  21:     // TODO : (Step 1) Add your property variables here

  22: }

  23: AJAXControls.FormClear.FormClearBehavior.prototype = {

  24:     initialize: function() {

  25:         AJAXControls.FormClear.FormClearBehavior.callBaseMethod(this, 'initialize');

26:

  27:         // TODO: Add your initalization code here

  28:         Sys.UI.DomEvent.addHandler(this.get_element(), 'click',

  29:             Function.createDelegate(this, this._onclick));

  30:     },

31:

  32:     dispose: function() {

  33:         // TODO: Add your cleanup code here

34:

  35:         AJAXControls.FormClear.FormClearBehavior.callBaseMethod(this, 'dispose');

  36:     },

37:

  38:     _onclick: function() {

  39:         for (var x = 0; x < document.forms.length; ++x) {

  40:             var CurrentForm = document.forms[x];

  41:             var CurrentInputs = CurrentForm.getElementsByTagName('input');

  42:             for (var y = 0; y < CurrentInputs.length; ++y) {

  43:                 if (CurrentInputs[y].type == 'text' || CurrentInputs[y].type == 'password') {

  44:                     CurrentInputs[y].value = '';

  45:                 }

  46:                 else if (CurrentInputs[y].type == 'checkbox') {

  47:                     CurrentInputs[y].checked = false;

  48:                 }

  49:                 else if (CurrentInputs[y].type == 'radio') {

  50:                     CurrentInputs[y].checked = false;

  51:                 }

  52:             }

  53:             var CurrentSelects = CurrentForm.getElementsByTagName('select');

  54:             for (var y = 0; y < CurrentSelects.length; ++y) {

  55:                 CurrentSelects[y].options.selectedIndex = 0;

  56:             }

  57:             var CurrentTextAreas = CurrentForm.getElementsByTagName('textarea');

  58:             for (var y = 0; y < CurrentTextAreas.length; ++y) {

  59:                 CurrentTextAreas[y].value = '';

  60:             }

  61:         }

  62:     }

  63: }

  64: AJAXControls.FormClear.FormClearBehavior.registerClass('AJAXControls.FormClear.FormClearBehavior', AjaxControlToolkit.BehaviorBase);

It doesn't clear hidden input items (that way your viewstate and other important items aren't deleted) nor does it do anything to any button that it finds. However all text boxes are cleared, radio, check boxes, etc. are reset to the first item in the list. I will say that there are definite ways this could be improved (adding default values for various items, specifying a set of controls to check instead of the entire form, etc.). However I wanted to keep this one simple. All you need to do is set the TargetControlID to the button that you want to be the clear button. Please note though that it doesn't stop the item from posting back to the server. So make sure to turn off submit behavior on the button. Other than that, it's ready to use. So download it, leave feedback, and happy coding.

Comments

Name *

Email (used to grab Gravatar image)

Website

Comment *

Other Posts in AJAX Controls

Form Clear Extender