title: how to use javascript in form runat=server without sending request to the server?
body: <p>my master page is inside a form runat="server" like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="Form1" runat="server"&gt;
           &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In one of my pages I added a textarea, a button (html controls, not ASP's), and some javascript code like this:</p>
  
  <pre><code>&lt;textarea id="ContentTextArea" class="ContentTextArea" rows="2" cols="20"&gt;&lt;/textarea&gt;
  &lt;button id="ClearButton" class="Button2" onclick="ClearButtonClick();"&gt;CLEAR&lt;/button&gt;
  
      &lt;script type="text/javascript"&gt;
          function ClearButtonClick() {
              document.getElementById("ContentTextArea").value = "";
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>I want the javascript code (which is clearing the textarea text) to run when the client click on the "clear" button without sending a request to the server, but because I have <code>&lt;form id="Form1" runat="server"&gt;</code> in the master page the button submit the data to the server and the page is reloaded.</p>
  
  <p>I must have <code>&lt;form id="Form1" runat="server"&gt;</code> in my master page, but I also want to use JavaSctipt in my code that will run on the client side.</p>
  
  <p>Thanks</p>
  
  <p>EDIT:</p>
  
  <p>my master page is:</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="Form1" runat="server"&gt;
          &lt;div class="header"&gt;
               &lt;div class="clear hideSkiplink"&gt;
                  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"&gt;
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="Contact Us"/&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
              &lt;/div&gt;
  
              &lt;div class="loginDisplay"&gt;
                  &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                      &lt;AnonymousTemplate&gt;
                          [ &lt;a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt; ]
                      &lt;/AnonymousTemplate&gt;
                      &lt;LoggedInTemplate&gt;
                          Welcome &lt;span class="bold"&gt;&lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;&lt;/span&gt;!
                          [ &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/&gt; ]
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
  
          &lt;div class="main"&gt;
          &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;
          &lt;/div&gt;
  
          &lt;div class="footer"&gt;
              &lt;p&gt;GH Electronics © 2012. All Rights Reserved.&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;input type="button" onclick="window.location = '/WareHouse/ContactUs.aspx';" value="avi"/&gt;
      &lt;script type="text/javascript"&gt;
  
             function ClearButtonClick() {
              document.getElementById("ContentTextArea").value = "";
              return false;
          }
      &lt;/script&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and my contact us form is:</p>
  
  <blockquote>
    
    
    <p>  </p>
  
  <pre><code>&lt;img alt="Contact Us" src="Images/contact_us.gif" style="float:left;"/&gt;
  
  &lt;p class="contactUs" runat="server"&gt;CONTACT US&lt;/p&gt;
  &lt;label&gt;Full Name:&lt;/label&gt;
  &lt;asp:TextBox class="FullNameTextBox" runat="server" /&gt;
  &lt;br /&gt; &lt;br /&gt;
  &lt;label&gt;Phone Number:&lt;/label&gt;
  &lt;asp:TextBox class="PhoneNumberTextBox" runat="server" /&gt;
  &lt;br /&gt; &lt;br /&gt;
  &lt;label&gt;Email:&lt;/label&gt;
  &lt;asp:TextBox class="EmailTextBox" runat="server" /&gt;
  &lt;br /&gt; &lt;br /&gt;
  &lt;label&gt;Subject:&lt;/label&gt;
  &lt;asp:TextBox class="SubjectTextBox" runat="server" /&gt;
  &lt;br /&gt; &lt;br /&gt;
  &lt;label&gt;Content:&lt;/label&gt;
  &lt;textarea id="ContentTextArea" class="ContentTextArea" rows="2" cols="20"&gt;&lt;/textarea&gt;
  &lt;br /&gt; &lt;br /&gt;
  &lt;asp:Button ID="SendButton" class="SendButton" Text="SEND" runat="server" /&gt;
  
  
  &lt;button id="ClearButton" class="Button2" onclick="ClearButtonClick();"&gt;CLEAR&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  
        function ClearButtonClick() {
         document.getElementById("ContentTextArea").value = "";
         return false;
     }
  </code></pre>
    
    <p></p>
    
    <p></p>
  </blockquote>