ASP.NET and JavaScript Events — onblur, onchange, onclick, onkeyup, OnClientClick, and onserverclick

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

• Validate form or CAPTCHA on client-side before submitting to server.

• Prevent unnecessary postback if client-side check fails.

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:

• When using HTML elements (not <asp:Button>) but still need a server-side postback.

• Hybrid pages mixing HTML + ASP.NET controls.

Client-Side vs Server-Side Event Comparison