In this, tutorial we will see about the "onchange event in jquery" with both controls (Asp.net control and HTML control). Most of the time during development we face problems that our "Jquery onchange event not working" behind this problem there is a reason we did not call the control properly. See the full tutorial to implement Jquery Onchange Event.
Steps
1. Always use Jquery Cdn file e.i.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
2. Don't forget to add a # symbol during control calls.
3. To call asp.net control we have use this ('#<%=ASPtxtbox.ClientID%>') because of runat="server"
4. To call HTML always use this ("#HTMLtxtbox").
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Onchange-event-jquery.aspx.cs" Inherits="Onchange_event_jquery" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#<%=ASPtxtbox.ClientID%>').change(function ()
{
alert('Change Event Done by asp.net control');
});
});
</script>
<script>
$(document).ready(function () {
$("#HTMLtxtbox").change(function ()
{
alert('Change Event Done by HTML control');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Asp.net Control onchane Test</td>
<td>
<asp:TextBox ID="ASPtxtbox" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>HTML Control onchange Test</td>
<td>
<input type="text" id="HTMLtxtbox" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Also Read:
Post a Comment