0
$(document).ready(function() {    
    clearTextBox();
});

function clearTextBox() {
    $('#btnReset').onclick = function() {
        $('#txtName').val = "";
        $('#txtContactEmail').val = "";
        $('#txtMessage').val = "";
    };
}

I am using asp.net to develop my web page.
Thus, all those control are on server-side. But whenever my btnReset is click is should be clear the textbox without refresh/postback. So i applied the javascript. But still can't work.

3
Contributors
9
Replies
25
Views
4 Years
Discussion Span
Last Post by gahhon
0
$(document).ready(function() {    
    clearTextBox();
});

function clearTextBox() 
{
    $('#txtName').val = "";
    $('#txtContactEmail').val = "";
    $('#txtMessage').val = "";
}

$('#btnReset').on("click",function() {
    clearTextBox();
})
0

So two things to consider...

One... since you are using asp.net make sure that you are referencing the correct IDs for these input elements. If you prefer to make it easy for you, use the ClientIdMode="Static" on the elements..

Here's the jQuery I'd use..

$(document).ready(function() {    
   $('#btnReset').click(function() {
      $('#txtName').val("");
      $('#txtContactEmail').val("");
      $('#txtMessage').val("");
   }); 
});

here is the example on jsfiddle...

Edited by JorgeM

0

is not working for me.

.ASPX

                        <div id="contact_form">                                
                                &nbsp;&nbsp;&nbsp;&nbsp;<asp:Label runat="server" Text="Name: " />
                                <asp:TextBox ID="txtName" runat="server" />   
                                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtName" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                             
                                <div class="cleaner_h10"></div>
                                &nbsp;&nbsp;&nbsp;&nbsp;<asp:Label runat="server" Text="Email: " />
                                <asp:TextBox ID="txtContactEmail" runat="server" />
                                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtContactEmail" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                                                       
                                <div class="cleaner_h10"></div>
                                <asp:Label runat="server" Text="Message: " />
                                <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Height="100px" Width="18em" />
                                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtMessage" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                               
                                <div class="cleaner_h10"></div>
                                <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="ContactUs" CssClass="Button" OnClick="ContactUs_Submit" />
                                <asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="Button" CausesValidation="false" ClientIDMode="Static" OnClientClick="clearTextBox()" />
                                <br /><br />
                                <asp:RegularExpressionValidator ValidationGroup="ContactUs" runat="server" ErrorMessage="E-mail must be valid format" ControlToValidate="txtContactEmail" 
                                ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" ForeColor="Red" Font-Size="10pt" Font-Italic="true" />                                         
                        </div>

.js

function clearTextBox() {   
    $('#txtName').val = "";
    $('#txtContactEmail').val = "";
    $('#txtMessage').val = "";
}

And it keep postback/refresh the page whenever i clicked the reset button

Edited by gahhon

0

Ok, for the reset button, you have to prevent the post back. change your js as follows...Also note that i specified that you use parenthesis for .val() in your jQuery. See above and see below.

<script>
    $(document).ready(function () {
        $('#btnReset').click(function (e) {
            e.preventDefault();
            $('#txtName').val("");
            $('#txtContactEmail').val("");
            $('#txtMessage').val("");
        });
    });
</script>

From your button, remove: OnClientClick="clearTextBox()". There is no function called clearTextBox().

I tested the code and it works as expected.

Edited by JorgeM

0

Here is the full code for the page. Note that I did not use a code behind because we are just testing client side...

It works as expected. When you click on the reset button, there is no postback and the values are cleared.

<%@ Page Language="C#" AutoEventWireup="true"  %>

<script runat="server">
    protected void ContactUs_Submit(object sender, EventArgs e)
    {

    }
</script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
<div id="contact_form">                                
&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Text="Name: " />
<asp:TextBox ID="txtName" runat="server" />   
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                             
<div class="cleaner_h10"></div>
&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label2" runat="server" Text="Email: " />
<asp:TextBox ID="txtContactEmail" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtContactEmail" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                                                       
<div class="cleaner_h10"></div>
<asp:Label ID="Label3" runat="server" Text="Message: " />
<asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Height="100px" Width="18em" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtMessage" ErrorMessage=" *" ForeColor="Red" Font-Size="10pt" ValidationGroup="ContactUs" />                               
<div class="cleaner_h10"></div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="ContactUs" CssClass="Button" OnClick="ContactUs_Submit" />
<asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="Button" CausesValidation="false" ClientIDMode="Static"  />
<br /><br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationGroup="ContactUs" runat="server" ErrorMessage="E-mail must be valid format" ControlToValidate="txtContactEmail" 
ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" ForeColor="Red" Font-Size="10pt" Font-Italic="true" />                                         
</div>
<script>
    $(document).ready(function () {
        $('#btnReset').click(function (e) {
            e.preventDefault();
            $('#txtName').val("");
            $('#txtContactEmail').val("");
            $('#txtMessage').val("");
        });
    });
</script>
</form>
</body>
</html>
0

LoL. It working fine.
But if i put the code inside a .js file and it can't be work.
Any idea?

0

Use chrome's dev tools, console to check for errors. Could be a path problem. Did you make sure you referenced the jQuery library?

Also, make sure your external js file is placed just before the closing body tag rather than the head section.

0

Lol. The problem is solved due to jQuery version is outdated. Thanks JorgeM for giving HINTS. <3

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.