Question

我的母版页位于表格runat =“server”中，如下所示：

<body>
    <form id="Form1" runat="server">
         <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </form>
</body>

在我的一个页面中，我添加了一个textarea，一个按钮（html控件，而不是ASP），以及一些像这样的javascript代码：

<textarea id="ContentTextArea" class="ContentTextArea" rows="2" cols="20"></textarea>
<button id="ClearButton" class="Button2" onclick="ClearButtonClick();">CLEAR</button>

    <script type="text/javascript">
        function ClearButtonClick() {
            document.getElementById("ContentTextArea").value = "";
        }
    </script>

我希望javascript代码（清除textarea文本）在客户端点击“清除”按钮而不向服务器发送请求时运行，但因为我在主页面中有<form id="Form1" runat="server">按钮将数据提交到服务器并重新加载页面。

我的母版页中必须有<form id="Form1" runat="server">，但我也希望在我的代码中使用JavaSctipt，这些代码将在客户端运行。

由于

编辑：

我的母版页是：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="Form1" runat="server">
        <div class="header">
             <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                        <asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="Contact Us"/>
                    </Items>
                </asp:Menu>
            </div>

            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
        <div class="clear">
        </div>

        <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>

        <div class="footer">
            <p>GH Electronics © 2012. All Rights Reserved.</p>
        </div>

    </form>
    <input type="button" onclick="window.location = '/WareHouse/ContactUs.aspx';" value="avi"/>
    <script type="text/javascript">

           function ClearButtonClick() {
            document.getElementById("ContentTextArea").value = "";
            return false;
        }
    </script>
</body>


</html>

我的联系表格是：

<img alt="Contact Us" src="Images/contact_us.gif" style="float:left;"/>

<p class="contactUs" runat="server">CONTACT US</p>
<label>Full Name:</label>
<asp:TextBox class="FullNameTextBox" runat="server" />
<br /> <br />
<label>Phone Number:</label>
<asp:TextBox class="PhoneNumberTextBox" runat="server" />
<br /> <br />
<label>Email:</label>
<asp:TextBox class="EmailTextBox" runat="server" />
<br /> <br />
<label>Subject:</label>
<asp:TextBox class="SubjectTextBox" runat="server" />
<br /> <br />
<label>Content:</label>
<textarea id="ContentTextArea" class="ContentTextArea" rows="2" cols="20"></textarea>
<br /> <br />
<asp:Button ID="SendButton" class="SendButton" Text="SEND" runat="server" />


<button id="ClearButton" class="Button2" onclick="ClearButtonClick();">CLEAR</button>

<script type="text/javascript">

      function ClearButtonClick() {
       document.getElementById("ContentTextArea").value = "";
       return false;
   }

Answer 1

认为应该这样做：

<button id="ClearButton" class="Button2" onclick="javascript:ClearButtonClick();return false;">CLEAR</button>

Answer 2

这样做。你必须在两个地方做出改变。

在onclick中添加return =“return ClearButtonClick（）;”事件登记如下。

  <button id="ClearButton" class="Button2" onclick="return ClearButtonClick();">CLEAR</button>

从javascript函数返回false以阻止它从发送请求到服务器把它放在页尾或头标之间。

<script type="text/javascript">
    function ClearButtonClick() {
        document.getElementById("ContentTextArea").value = "";
        return false;
    }
</script>

如何在表单runat = server中使用javascript而不向服务器发送请求？

2 个答案: