Wednesday, 16 April 2014

How to Clear TextBox values using JQuery in ASP.NET


In this article I will explain how to clear multiple Textboxes using JQuery in ASP.NET.

In this scenario I have created three Textboxes for user information. User click the Clear button all three textboxes values are removed.

Clear only particular TextBox value using JQuery in asp.net

<script type="text/javascript">
$('#btnFirst').click(function () {
$('#txtFirstName').val('');
})
})
</script>

Clear all TextBox value using JQuery in ASP.NET

<script type="text/javascript">
$(function () {
$('#btnClear').click(function () {
$('input[type=text]').each(function () {
$(this).val('');
})
})
})
</script>


Total page Design code:



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clear Textbox using jQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btnClear').click(function () {
$('input[type=text]').each(function () {
$(this).val('');
})
})
$('#btnFirst').click(function () {
$('#txtFirstName').val('');
})
})
</script>
</head>
<body>
<div>
<form id="hdjfh" runat="server">
<table>
<tr>
<td><b>Enter First Name:</b></td>
<td>
<asp:TextBox runat="server" ID="txtFirstName" /></td>
</tr>
<tr>
<td><b>Enter Last Name:</b></td>
<td>
<asp:TextBox runat="server" ID="txtSecoundName" /></td>
</tr>
<tr>
<td><b>Enter Middle Name:</b></td>
<td>
<asp:TextBox runat="server" ID="txtMiddle" /></td>
</tr>
<tr>
<td>
<b>Clear TextBoxes</b>
</td>
<td>
<asp:Button ID="btnFirst" runat="server" Text="Clear First Textbox" />
<asp:Button ID="btnClear" runat="server" Text="Clear All Textboxs" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>



No comments:

Post a Comment