Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Textbox with Clear Button | Clearable Textbox With JQuery Plugin

Sep 19, 2012
Introduction:

Here I will explain how to use JQuery to implement clearable textbox or textbox with clear button in JQuery using asp.net.

Description:

In previous article I explained Generate thumbnails from youtube video, Generate thumbnails from images using JQuery and many articles relating to
JQuery, asp.net, SQL Server etc. Now I will explain how to create or implement textbox with clear button using JQuery in asp.net.

To implement this concept we have one JQuery plugin by using that we can easily set clear option in textbox when user enter text for that we need to write the following code


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>clearable textbox with jquery plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="jquery.clearableTextField.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtName').clearableTextField();
});
</script>
<style type="text/css">
div.text_clear_button { background:url(clear_cross.png); width:11px; height:11px; margin:0; padding:0;
z-index:2; position:absolute; cursor:pointer; }
div.form {margin:10px; padding:20px; background:#eee;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="form">
<label for="Name">Enter Text Here</label>:
<asp:TextBox ID="txtName" runat="server" />
</div>
</form>
</body>
</html>
If you observe above code in header section I added script file link (jquery.min.js) by using that file we have a chance to interact with JQuery and I added another script file jquery.clearableTextField.js by using this file we can set clear option in textbox based on the text in textbox you can get this file from the attached download folder

Demo

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Unknown said...

Really it was very useful me but I need to Know that how to create a error message showing by automatically when the user given input. Please give me some tips

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.