Title: JQuery set text box value in asp.net
Description:
In recent articles we known how to implement the Data binding concept on data controls like grid view,Data list,list etc.Here i would like to explain how to bind data to asp.net text box while leave the focus on Drop Down List using JQuery blur function.The blur function will fire when the previous controls has lost focus.
Example:
In the above example we have taken one drop down list and text box to display the amount order .When the amount Drop down list has lost the focus ,the total Amount will be populate automatically.
Description:
In recent articles we known how to implement the Data binding concept on data controls like grid view,Data list,list etc.Here i would like to explain how to bind data to asp.net text box while leave the focus on Drop Down List using JQuery blur function.The blur function will fire when the previous controls has lost focus.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bind data to Asp.net text box using DropDownList in jquery</title>
</head>
<script type="text/javascript" src="~/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$("#ddlSalesOrder").blur(function(){
var SalesOrderText = $("#ddlSalesOrder option:selected").text();
alert(SalesOrderText);
$("#<%= txtOrderTotalAmt.ClientID %>".val(SalesOrderText);
});
});
</script>
</head>
<body>
Amount: <asp:DropDownList ID="ddlSalesOrder" runat="server">
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>125</asp:ListItem>
<asp:ListItem>150</asp:ListItem>
<asp:ListItem>175</asp:ListItem>
<asp:ListItem>200</asp:ListItem>
</asp:DropDownList>
TotalAmount:<asp:TextBox ID="txtOrderTotalAmt" runat="server"></asp:TextBox>
</body>
</html>
As you can see there is alert to confirmation for drop down selected value will come when the blur event occurs.Whenever we are using JQuery ,we should add JQuery library reference to our application.In the above example we have taken one drop down list and text box to display the amount order .When the amount Drop down list has lost the focus ,the total Amount will be populate automatically.
No comments:
Post a Comment