Event handling is an essential part of web development.
In ASP.NET applications, we often combine client-side JavaScript events and server-side events to create interactive and secure web pages.
In this article, we’ll explore common event attributes such as:
onblur
onchange
onclick
onkeyup
OnClientClick
onserverclick
We’ll see what each does, when to use them, and the key differences between client-side and server-side events.
1. onblur — Trigger When an Input Loses Focus
Purpose
onblur fires when a user moves the focus away from an input element — for example, when the user finishes typing and clicks elsewhere.
Example
<input type="text" id="txtName" onblur="validateName()" placeholder="Enter your name" />
<script>
function validateName() {
var name = document.getElementById("txtName").value;
if (name.trim() === "") {
alert("Name cannot be empty!");
}
}
</script>
Use case
Input validation after user leaves a field (e.g., email, mobile number, PAN).
Real-time form error feedback.
2. onchange — Trigger When Value Changes
Purpose
onchange fires when the value of an element changes and the user leaves (unfocuses) that field.
Example
<select id="category" onchange="categorydiscount()">
<option value="0">Select Category</option>
<option value="1">Electronics</option>
<option value="2">Books</option>
</select>
<script>
function categorydiscount() {
alert("Category changed! Applying discount...");
}
</script>
Use case
Updating prices, discounts, or other UI data when a dropdown or textbox changes.
Dynamic calculations (GST, total amount, category selection, etc.).
3. onclick — Trigger When an Element Is Clicked
Purpose
onclick fires when a user clicks a button, link, or any clickable element.
Example
<button type="button" onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button clicked successfully!");
}
</script>
Use case
Trigger client-side logic before form submission.
Handle UI interactions like opening modals, showing alerts, etc.
4. onkeyup — Trigger When a Key Is Released
Purpose
onkeyup fires each time a key is released in an input box.
Example
<input type="text" id="txtName" onkeyup="return capitalize(this);" placeholder="Enter name" />
<script>
function capitalize(ele) {
ele.value = ele.value.toUpperCase();
}
</script>
Use case:
Real-time input formatting (e.g., uppercase names, restricting characters).
Live validation or searching.
5. OnClientClick — ASP.NET’s Client-Side Button Event
Purpose
OnClientClick belongs to ASP.NET Server Controls (like <asp:Button>).
It executes JavaScript code on the client-side before the server-side postback occurs.
Example
<asp:Button ID="btnSubmit" runat="server"
Text="Submit"
OnClientClick="return captchavalidate();"
OnClick="btnSubmit_Click" />
function captchavalidate() {
var entered = document.getElementById("txtCaptcha").value;
var actual = document.getElementById("hdnCaptcha").value;
if (entered !== actual) {
alert("Invalid CAPTCHA!");
return false; // stops postback
}
return true; // allows postback
}
Use case
Key Point
Returning false from OnClientClick cancels server postback.
6. onserverclick — Server-Side Click Event for HTML Elements
Purpose
onserverclick is used with HTML elements (like <input> or <button>) that have runat="server".
This event triggers a server-side method in your C# code-behind file.
Example
<input type="button" id="btnServer" runat="server" value="Click Server" onserverclick="btnServer_Click" />
protected void btnServer_Click(object sender, EventArgs e)
{
lblMessage.Text = "Button clicked — handled on server!";
}
Use case:
Client-Side vs Server-Side Event Comparison
| Event Type | Example | Executes Where | Requires Postback | Common Use |
|---|
| onblur | onblur="validate()" | Browser (JavaScript) | No | Field validation |
| onchange | onchange="updatePrice()" | Browser | No | Dropdown/text change |
| onclick | onclick="showMessage()" | Browser | No | Button click action |
| onkeyup | onkeyup="searchName()" | Browser | No | Live typing actions |
| OnClientClick | OnClientClick="return validate()" | Browser (ASP.NET control) | No | Pre-submit check |
| onserverclick | onserverclick="btnServer_Click" | Server (C#) | Yes | Server logic execution |
When to Use What
| Scenario | Best Event |
|---|
| Validate user input instantly | onblur or onkeyup |
| Trigger calculation after value change | onchange |
| Run JavaScript before submitting | OnClientClick |
| Execute logic after submission | onserverclick |
| Handle normal client click | onclick |
Combined Example — Client + Server Flow
<input type="text" id="txtPan" runat="server"
placeholder="Enter PAN"
onkeyup="return capitalize(this);"
onblur="validatePAN()" />
<asp:Button ID="btnSubmit" runat="server"
Text="Submit"
OnClientClick="return captchavalidate();"
OnClick="btnSubmit_Click" />
function capitalize(ele) {
ele.value = ele.value.toUpperCase();
}
function validatePAN() {
var pan = document.getElementById("txtPan").value;
if (pan.length < 10) alert("Invalid PAN!");
}
function captchavalidate() {
var valid = true; // your logic
if (!valid) {
alert("Captcha failed!");
return false;
}
return true; // proceed with server postback
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblMessage.Text = "Form submitted successfully!";
}
Conclusion
Understanding event types is crucial for building responsive and efficient ASP.NET applications.
Client-side events (onblur, onchange, onclick, onkeyup) → Execute instantly in the browser without postback.
ASP.NET hybrid events (OnClientClick, onserverclick) → Bridge between browser and server actions.
By combining them wisely, you can: