Execute client-side code/ validation on RadioButton/ CheckBox before executing their server-side CheckedChanged (Click) event.

We very much know if we want to perform client-side validations before the server-side Click event of button, we need to write our javascript in “onclientclick” event, and if it returns False, the server-side Click event will not be executed. As easy as it sounds!

But it’s not that straight-forward for controls like RadioButton and Checkbox.

Our article will take example of RadioButton, and will show you how to achieve this.

Consider a webpage showing user following options:

Now, if a user clicks either “Movie”, or “Dinner Out” option, it should show fire some server-side code directly.

But, if user clicks on “Touring Europe” option, it should first ask for confirmation from user and if user agrees, then only should fire server-side code written in “CheckedChanged” event.

Just like –

At first it may look that the job is only to add “onclick” attribute and to call a javascript method for that. But it requires a little more than that.

If you see HTML source of page at this point, it will show there is already a javascript method which is assigned to execute on click.

Now, if you simply add your own JavaScript code for “onclick” method, your code will be executed before existing code of click method (i.e. before setTimeout(..__doPostBack)… ). And if you have “return” statement in your code (to return True/ False), the PostBack will not be hit, and your “CheckedChanged” event will never be called.

If you say, why this behavior is different from “onclientclick” of button control? It’s simply because Button is a submit/ postback control, and so it does not rely on javascript. So you will never see javascript __doPostBack call in its HTML source

To overcome this, you will need to do the postback from your javascript method

Following is a step-by-step instruction to achieve the same in our example. (You can easily correlate it with your requirements)

            STEP 1

            Assign javascript method to “onclick” attribute of radiobutton in Page_Load.

if (!Page.IsPostBack)

        {

            rbOptEuropeTour.Attributes.Add("onclick", "return checkBudgetForEuropeTour('" + rbOpt3.ClientID + "')");

       }

checkBudgetForEuropeTour is a javascript method which we will write in next step.

Here, rpOpt3 is the radio button for “Touring Europe” option. Here, client id of this control is passed to help the code in identifying which control has caused postback, and using that we will call a corresponding server-side event. (Explained in later steps).

STEP 2

      Write javascript method in your aspx page, or script file (.js) according to your preferences.

function checkBudgetForEuropeTour(rbOptClientId) {

        if (confirm('You do not have enough budget for Europe Tour. Do you still want to go with this option?') == true) {

            __doPostBack(rbOptClientId, 'CheckedChanged');           

        }

        else {

            return false;

        }

    }

We are explicitly doing postback from the javascript method (using __doPostBack).

      STEP3

      Last step, is to identify which control has caused the postback, and to call server-side event accordingly.

It should be written ideally in Page_Load event.

if (Page.IsPostBack)

        {

            if (Request["__EVENTTARGET"].Contains("rbOptEuropeTour") == true && Request["__EVENTARGUMENT"] == "CheckedChanged")

            {

                rbOptEuropeTour_CheckedChanged(sender, e);

            }

        }

“rbOptEuropeTour_CheckedChanged” is the server-side OnCheckedChanged event for radio button “rbOptEuropeTour”.

That’s all we need to do!

CodeProject