title: How to clear contents of an element on radio button change
body: <p>I am having two radio buttons of label 'Text Mode' and 'Html Mode'. If Text Mode is selected only <code>&lt;h:inputTextarea/&gt;</code> should be displayed and the contents of HTML editor must be empty. If Html Mode is selected <code>&lt;rich:editor/&gt;</code> should be displayed and the Text textarea must be empty. The default selection is Text mode. (i.e. if the user adds text in Text mode and navigates to the HTML mode, we would like to clear the textarea before showing the rich:editor and vice versa)</p>
  
  <pre><code> &lt;input id="textMode" type="radio" name="text" value="textMode"&gt;Text mode&lt;/input&gt;
   &lt;input id="htmlMode" type="radio" name="text" value="htmlMode"&gt;Html mode&lt;/input&gt;
  
   &lt;table id="questionText"&gt;
    &lt;tr&gt;
     &lt;td id="textQuestionField"&gt;
      &lt;h:inputTextarea value="#{forum.message}" cols="80" rows="3"/&gt;
     &lt;/td&gt;
  
     &lt;td id="htmlQuestionField"&gt;
      &lt;rich:editor theme="advanced" useSeamText="true" viewMode="visual" autoResize="true" value="#{forum.message}"&gt;
       &lt;f:param name="theme_advanced_buttons1" value="newdocument,separator,cut,copy,paste,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,hr,removeformat,visualaid,separator,sub,sup"/&gt;
       &lt;f:param name="theme_advanced_buttons2" value="bullist,numlist,separator,outdent,indent,blockquote,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,code,separator,forecolor,backcolor"/&gt;
       &lt;f:param name="theme_advanced_buttons3" value="fontselect,fontsizeselect,formatselect,styleselect,separator,charmap"/&gt;
       &lt;f:param name="theme_advanced_resizing" value="true"/&gt;
       &lt;f:param name="theme_advanced_toolbar_location" value="top" /&gt;
       &lt;f:param name="theme_advanced_toolbar_align" value="left" /&gt;
          &lt;/rich:editor&gt;
      &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  
  
  function textHtmlQuestionHandler(tableId, radioButtonTextId, radioButtonHtmlId, textQuestionId, htmlQuestionId) {
      // Text Mode is enabled by default
      jQuery(radioButtonTextId).attr('checked', true);
      jQuery(tableId).find(htmlQuestionId).hide();
  
      jQuery("input[type='radio']").change(function() {
          // Hide HTML question field, if text mode is enabled
          if (jQuery(radioButtonTextId).is(':checked')) {
              jQuery(tableId).find(textQuestionId).show();
              jQuery(tableId).find(htmlQuestionId).hide();
          } else if (jQuery(radioButtonHtmlId).is(':checked')) {
              // Hide text question field, if HTML mode is enabled
              jQuery(tableId).find(htmlQuestionId).show();
              jQuery(tableId).find(textQuestionId).hide();
          }
      });
  }
  </code></pre>
  
  <p>How to achieve this?</p>