Category Archives: JQuery

Focus() and Blure() Event on TextBox using JQuery

How to use Focus() and Blure() Event on textbox control using JQuery in ASP.Net.

First, Download JQuery library from http://jquery.com. and include in web page at head section.

Design the ASP.Net web form with Three TextBox Control.

The ASP.Net web page design is :

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

Write below JQuery code at head section in aspx page.

<head>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“input”).focus(function() {
$(this).css(“background-color”, “#00D96C”);
});
$(“input”).blur(function() {
$(this).css(“background-color”, “#ffffff”);
});
});
</script>
</head>

The JQuery Exmaple out put is :

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

focus and blure event using JQuery in asp.net

Get Selected item from DropDownList using JQuery

In this asp.net post we will learn how to Get Selected item from DropDownList using JQuery in ASP.Net.

First, Download JQuery library from http://jquery.com. and include in web page at head section.

Design the ASP.Net web form with one Button, one TextBox and one DroDownList control.

The ASP.Net web page design is :

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Write below JQuery code at head section in aspx page.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
alert($(‘#<%=DropDownList1.ClientID%> option:selected’).text());
$(‘#<%=TextBox1.ClientID%>’).val($(‘#<%=DropDownList1.ClientID%> option:selected’).text());

});
});
</script>
</head>

The Get Selected item from DropDownList using JQuery example out put is :

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Get Selected item from Dropdownlist using JQuery

Check CheckBox Status in ASP.Net using JQuery

In this asp.net post we will learn how to check status of checkbox control using JQuery.

First, Download JQuery library from http://jquery.com. and include in web page at head section.

Design the ASP.Net web form with one Button and one CheckBox control.

The ASP.Net web page design is :

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Write below JQuery code at head section in aspx page.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
alert($(‘#<%=CheckBox1.ClientID%>’).attr(‘checked’));
});
});
</script>
</head>

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Check Status of CheckBox using JQuery

Check/UnCheck CheckBox Control in ASP.Net

How to Check/UnCheck CheckBox Control in ASP.Net using JQuery.

First, Download JQuery library from http://jquery.com. and include in web page at head section.

Design the ASP.Net web form with two Button and one CheckBox control.

Here, we have two asp.net button control one for Check and second for Uncheck CheckBox control in asp.net.

The Design of web page is :

Check/UnCheck CheckBox Control in asp.net using JQuery.

Check/UnCheck CheckBox Control in asp.net using JQuery.

Write below JQuery code at head section in aspx page.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
$(‘#<%=CheckBox1.ClientID%>’).attr(‘checked’, true);
});
$(“#Button2”).click(function() {
$(‘#<%=CheckBox1.ClientID%>’).attr(‘checked’, false);
});

});
</script>
</head>

Check/UnCheck CheckBox Control in asp.net using JQuery.

Check/UnCheck CheckBox Control in asp.net using JQuery.

Check/UnCheck CheckBox Control in asp.net using JQuery.

Check/UnCheck CheckBox Control in asp.net using JQuery.

Assign Value to TextBox Control using JQuery in ASP.Net

Now,  we understood the concept of JQuery and How to use JQuery in ASP.Net.

In this ASP.Net Jquery Post we will learn to Assign value to TextBox control in ASP.Net.

First, Download JQuery library from http://jquery.com/. and include in web page at head section.

Design the ASP.Net web form with one Button and one TextBox control.

First, clear the TextBox control text value, when we click button then assign value to TextBox control.

write below code for design asp.net web form:

<asp:TextBox ID=”TextBox1″ runat=”server” Height=”24px” Width=”140px”></asp:TextBox>
<asp:Button ID=”Button2″ runat=”server” Text=”Assign Value” />

The out put of design asp.net web form :

Assign text vlaue to TextBox control using JQuery in ASP.Net.

Assign text vlaue to TextBox control using JQuery in ASP.Net.

Now, Write below JQuery code for assign value to Textbox control.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
$(‘#<%=TextBox1.ClientID%>’).val(“Meera Academy”);  
});
});
</script>
</head>

The Result of JQuery Example  is :

Assign text vlaue to TextBox control using JQuery in ASP.Net.

Assign text vlaue to TextBox control using JQuery in ASP.Net.

Now , we learn to get value from Textbox using JQuery.

Get value from TextBox syntax :

$(‘#<%=TextBox1.ClientID%>’).val();

I hope this JQuery Textbox Example will help you….

 

Get and Set Label Value on Button Click Event using JQuery in ASP.Net

Hi, In Previous post we understood concept of JQuery and How to use JQuery in ASP.Net.

In this ASP.Net Jquery Post we will learn to Set text value to Label control and get value from Label control in ASP.Net.

First, Download JQuery library from http://jquery.com/. and include in web page at head section.

Design the ASP.Net web form with one Button and one Label control.

First, we will learn to get the Label control value when we click the button control.

Here, we assign label text = Meera Academy. when we click the button then label value shows in alert message box.

code for design asp.net web form:

 <asp:Label ID=”Label1″ runat=”server” Text=”Meera Academy”></asp:Label>
<asp:Button ID=”Button1″ runat=”server” Text=”Get Label Value” />

 

Get Label value while button click in asp.net using JQuery

Get Label value while button click in asp.net using JQuery

write the below JQuery code for get the label value on button click event.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
  alert($(‘#<%=Label1.ClientID%>’).text());    
});
});
</script>
</head>

The out put of above Jquery Example is :

Get Label value while button click in asp.net using JQuery

Get Label value while button click in asp.net using JQuery

Now, we will learn to set value to label control using JQuery. First clear the text value of label control.

we assign value “Meera Academy” to label control while clicking the Button control in asp.net.

code for design asp.net web form:

 <asp:Label ID=”Label1″ runat=”server” Text=””></asp:Label>
<asp:Button ID=”Button1″ runat=”server” Text=”Set Label Value” />

 

Set Label value while button click in asp.net using JQuery

Set Label value while button click in asp.net using JQuery

In above figure we already removed the label text value.

write below JQuery code for assign value to Label control.

<head runat=”server”>
<title>JQuery in ASP.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
$(‘#<%=Label1.ClientID%>’).text(“Meera Academy”); 
});
});
</script>
</head>

The Result of above JQuery Example is :

Set Label value while button click in asp.net using JQuery

Set Label value while button click in asp.net using JQuery

I hope this JQuery Exmaple Set and Get Value of Label control will help you….

http://jquery.com/.#sthash.EVaPn3WB.dpuf
http://jquery.com/.#sthash.EVaPn3WB.dpuf
http://jquery.com/.#sthash.EVaPn3WB.dpuf

How to use JQuery in ASP.Net ?

In this asp.net post we will learn to use JQuery in ASP.Net, before start to learn we must know about JQuery.

What is JQuery ??

JQuery is a JavaScript Library.
JQuery is a lightweight, simple and fast JavaScript library which is supports many browsers.
JQuery is a library written using JavaScript, where as JavaScript is a language.

First, we must include JQuery library in our web form.

Download latest version on JQuery from http://jquery.com/.

After Downloading JQuery library include it to head Section of web form like below.

<head runat=”server”>
<title>Learn JQuery in ASp.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
</script>
</head>

Now, you can write your JQuery code in head Section.

Here, we take one Example for understand how to use JQuery in ASP.Net.

Show the alert() box while clicking the ASP.Net Server Button Control.

First, Design the ASP.Net web page with one Button control.

How to use JQuery in ASP.Net.

How to use JQuery in ASP.Net.

Now, While we click the Button at that time the alert box will show message.

write below JQuery code in head section on web form.

<head runat=”server”>
<title>Learn JQuery in ASp.Net</title>
<script src=”jquery-1.4.3.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function() {
$(“#Button1”).click(function() {
alert(“Hello Meera Academy !!”);
});
});
</script>
</head>

Here, above we added JQuery library and write JQuery code for show the alert box.

The Button1 is our server control button ID.

The Result of this JQuery Example is :

How to use JQuery in ASP.Net.

How to use JQuery in ASP.Net.