How to reset textbox and checkbox controls in an ASP.net document

One of the most frustrating things about ASP.net is, being a client-server based technology, the "default" design of any ASP.net web form is to assume all control is done at the server side (using code behind like C# or VB.net) and little if any control is done on the client-side (jQuery, javascript, etc). Unfortunately in many situations when developing a form, you need to be able to control the web form on the client side and not the server side. This is especially true when using validation controls such as <asp:RequiredFieldValidator> and <asp:CustomValidator>.

Those controls "kick in" even before your program starts going into the server, and if you need to call methods to reset the form for example (I think you know where this is going!), ASP.net won't let you and hold you "accountable" for the fact some fields in your form could be invalid and they need to be valid before code-behind kicks in.

In these cases, you must code your logic into the ASPX page itself using a scripting language such as JavaScript.

So without further adue, here is the script I use to reset all my textbox and checkbox controls in my web form, and it's neat because you don't get that "flash" effect when the system has gone into your code behind. Obviously if you have other controls, you'll need to code them into this script somehow (Google is your friend!), and I am sure there is more neater or effective ways of doing this in jQuery, but I am not very familiary with it at this stage. Many ways to skin a cat!

         function ResetForm() {
          //get the all the Input type elements in the document
          var AllInputsElements = document.getElementsByTagName('input');
          var TotalInputs = AllInputsElements.length;
       
          //we have to find the checkboxes and uncheck them
          //note: <asp:checkbox renders to <input type="checkbox" after compiling, which is why we use 'input' above
          for(var i=0;i< TotalInputs ; i++ )
          {
            if(AllInputsElements[i].type =='checkbox')
            {
                AllInputsElements[i].checked = false;
            }
          }
         
          //reset all textbox controls
          $('input[type=text], textarea').val('');
         
          Page_ClientValidateReset();
          return false;
      }

      //This function resets all the validation controls so that they don't "fire" up
      //during a post-back.
      function Page_ClientValidateReset() {
          if (typeof (Page_Validators) != "undefined") {
              for (var i = 0; i < Page_Validators.length; i++) {
                  var validator = Page_Validators[i];
                  validator.isvalid = true;
                  ValidatorUpdateDisplay(validator);
              }
          }
      }

To call the code, I simply use an <asp:button> control:

My apologies for the code snippett and lack of copy to clipboard and scrollbars. I am still trying to get to terms with SyntaxHighlighter from Alex Gorbatchev. An excellent tool by the way!


Join me on Google+