Using jQuery to toggle visibility of an ASP.NET textbox based on an ASP.NET DropDownList Control

My requirement was to display/hide associated comments boxes depending on what was entered in a "yes/no/not available" style dropdown.

To implement this, I made use of the following

1. Hooking up the click and load events of the dropdowns via jQuery so that the comments text boxes would show correctly when the page initially loaded, or when the selected value changed
2. Putting spans around groups of controls that I wanted to hide/show to use in the jQuery selectors e.g. span with class of "pricing" for all controls that should be hidden/ shown based on the Pricing dropdown list.
3. In the common javascript handler, passing through the dropdownlist control itself, along with the class which should be used by the jQuery selectors to be hidden/shown.
   

STEP 1 - Common Code (CommentFieldHelper.js) - add this as a link ref to your masterpage/base page/page/control

/********************************************************************************************/
/*Javascript file for hide/show of Yes/No/NA controls and their asssociated comment fields*/
/* Version 0.1 - Original*/
/*******************************************************************************************/

//Initialise handlers when the control is loaded and on change to show/hide associated comment field
function initCommentFieldVisibilityHandlers(sourceControl, classToHide, areNotesShownWhenNo)
{
   //Hook up change handler
   sourceControl.change(
           function() {
   changeCommentFieldVisibility($(this), classToHide, areNotesShownWhenNo);
           }
           )

   //Hook up load handler
   changeCommentFieldVisibility(sourceControl, classToHide, areNotesShownWhenNo)
}


//Set visibility of controls with the "classToHide" class defined on them (typically span class="myclassname")
function changeCommentFieldVisibility(sourceControl, classToHide, areNotesShownWhenNo) {

   //debugger;
   var selected = $('option:selected', sourceControl).text();

   if (areNotesShownWhenNo == false) {
       if (selected == 'No') {
           $('span.' + classToHide).fadeOut();
       }
       else {
           $('span.' + classToHide).fadeIn();
       }
   }
   else {
       ///If areNotesShownWhenNo and selected item is not No, then hide.
       if (selected != 'No') {
           $('span.' + classToHide).fadeOut();
       }
       else {
           $('span.' + classToHide).fadeIn();
       }

   }
}

STEP 2 - Simple inline in control/page/master page:

<script language="javascript" type="text/javascript">

//Place in your user control/page/masterpage
$(document).ready(function() {
//Initialise hide and show of associated comments textbox onload/onchange of dropdown list
initCommentFieldVisibilityHandlers(
  $('#<%=ProposalAssessmentFormView.FindControl("FundingStateInfrastructureRelevantDropDownList").ClientID %>'),
  'fundingStateInfrastructureRelevant', false);

})

</script>

STEP 3 - Add controls/divs/spans with the correct class tags so they will be shown/hidden based on the selected value of the dropdown list.

How do I handle or abort Function Key events (e.g. F1, F2,etc) in both IE and Firefox?

Run this page and you will be shown the keycode for the Function Key you pressed. In addition, any standard browser handlers (such as help prompts when F1 is pressed or Searches when F3 is pressed) will be aborted - so you can pass them to your app instead. See below:

  <script type="text/javascript" language="javascript">
  /////////////////////////////////////////////////////////////////////
  ///Demo Script to display the function key that was pressed
  ///and abort any browser event e.g. F3 for IE find, 
  ///F1 for IE help, F1 for Firefox Help
  /////////////////////////////////////////////////////////////////////
  ///Version      Author          Date            Comment
  ///1.0          DDK             03 Dec 2008     Original Version for 
  ///                                             Application Tender
  ///                                             Proof of concept 
  ///                                             when users wanted 'green
  ///                                             screen' functionality
  /////////////////////////////////////////////////////////////////////
  //debugger;
  document.onkeydown = showDownAndAbortEvent;
  //Stop F1 opening Help in IE
  document.onhelp=function() {return false};
  window.onhelp=function() {return false};
  
  // decipher key down codes
  function showDownAndAbortEvent(evt) 
  {
      //clearCells();
      evt = (evt) ? evt : ((event) ? event : null);
      if (evt) {
          alert('keyCode:' + evt.keyCode + ';charcode' + evt.charCode + ';' )  ;
          try
          {
              evt.preventDefault();  // disable default help in Firefox
              evt.stopPropagation(); 
          }
          catch (ex) {}
          try
          {
              //Kill any intercepts for ie
              window.event.cancelBubble = true;
              window.event.returnValue = false;
              window.event.keyCode = 0;
          }
          catch (ex) {}
          return false;
          }
  }
  </script>