How do I get an ASP.NET checkbox to fire code behind after client side onclick

Question

0.00/5 (No votes)

See more:

I have an ASP.NET checkbox inside a gridview.
It has some JavaScript in OnClick to confirm that the operator wishes to proceed.
It also has some server side code on the OnCheckedChanged event.
The client side code is being executed, but the server side code is not being triggered, irrespective of whether the operator elects to proceed or not.
I have confirmed this by inserting breakpoints in the code behind.

If I remove OnClick="return ProceedYN();" then the server side code is executed correctly.

Any suggestions on what I'm doing wrong are much appreciated!

What I have tried:

The relevant part of my code is:

ASP.NET

<ItemTemplate>
    <asp:CheckBox ID="InclSectionCB" OnClick="return ProceedYN();" OnCheckedChanged="InclSectionCBChanged" runat="server" AutoPostBack="True" />
</ItemTemplate>

JavaScript

<script type="text/javascript">
        function ProceedYN() {
            return confirm('Proceed?');
        }
    </script>

Posted 30-Oct-23 18:41pm

EStaples

Updated 1-Nov-23 10:21am

Deeksha Shenoy

v3

Add a Solution

Comments

adriancs 31-Oct-23 7:53am

I suggest use dynamic HTML and javascript ajax/fetchapi in stead.

2 solutions

Solution 1

The issue you're experiencing may be related to the order of execution and how the OnClick JavaScript event handler is interacting with the server-side event handler.
To fix this, You can remove the 'OnClick' javaScript event handler from the CheckBox control and use the OnClientClick attribute instead to bind the JavaScript function for confirmation.

ASP

<asp:CheckBox ID="InclSectionCB" OnCheckedChanged="InclSectionCBChanged" runat="server" AutoPostBack="True" OnClientClick="return ProceedYN();" />

In your JavaScript ProceedYN() function, you can show a confirmation dialog to the operator. If they confirm, you can return true, allowing the server-side event to execute. If they cancel, return false to prevent the postback.

JavaScript

function ProceedYN() {
    // Show a confirmation dialog to the operator
    var userConfirmed = confirm("Are you sure you want to proceed?");
    
    // Return true to allow the postback if confirmed, or false to cancel it
    return userConfirmed;
}

Posted 30-Oct-23 21:27pm

M Imran Ansari

Comments

EStaples 31-Oct-23 18:08pm

Thanks Imran, appreciate the response.

M Imran Ansari 1-Nov-23 2:39am

You're welcome. Happy Coding!

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-10-31T02:58:00

If you view the rendered HTML in your browser, you will see that you have generated an onclick attribute that looks something like:

HTML

<input type="checkbox" onclick="return ProceedYN();WebForm_DoPostBackWithOptions(...);">

Clearly, regardless of the value returned from your ProceedYN function, the WebForm_DoPostBackWithOptions code will never be called, because your handler returns unconditionally.

Change your control to use:

ASPX

<asp:CheckBox ID="InclSectionCB" OnClick="if(!ProceedYN())return false;" OnCheckedChanged="InclSectionCBChanged" runat="server" AutoPostBack="True" />

Your generated HTML will then look more like: