Javascript clearing textbox values

[gahhon]

$(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.

[paulkd]

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

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

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

[JorgeM]

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...

[gahhon]

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

[JorgeM]

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.

[gahhon]

I do copy and paste, but it no work.
And still keep postback.

[JorgeM]

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>

[gahhon]

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

[JorgeM]

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.

[gahhon]

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