enable or disable e.preventDefault of javascript for ASP:NET webform button

Question

I am working on ASP.NET 3.5 webform application. I have submit button in webform

   <cc1:FlatButton ID="btnSubmit" runat="server" class="positive" Text="Submit Assessment" OnClick="btnSubmit_Click" RemoveDiv="True" />

which call OnClick="btnSubmit_Click code-behind.

protected void btnSubmit_Click(object sender, EventArgs e)
    {
         ....

Now I have additional requirement, provide messagebox i.e. alert which appear when user click on above submit button, and based on user option selection, form submit or not

My question is how can I prevent to call code-behind btnSubmit_Click event based on user selection i.e. e.preventDefault() when user select no otherwise carry on call to btnSubmit_Click

now below code doesn't stop calling server code because I am calling e.preventDefault() at later stage of process flow.

is there any way I can achieve this as for pause server calling???

JQuery Code

 $(document).ready(function () {

        createDialogElements();

        $("#ctl00_ContentArea_btnSubmit").click(function (e) {

           $("#WindowMessageDialog").jqxWindow('open');

           $("#messageDialog_btn_no").click(function () {

               alert("answer is no");

               e.preventDefault();
           });

           $("#messageDialog_btn_yes").click(function () {

               alert("answer is yes");
           });
        });

Answer 1

You can use the OnClientClick property for server controls in asp.net.

The problem is, when you click the submit button, the function defined in OnClientClick will be triggered and its result must be true of false, to continue or cancel the submit. In your example, you're opening a dialog and waiting for an user click, but the javascript will not stop for waiting that action from user.

If it was a simple validation in javascript, like a required field, or any expected value would be very simple.

There are some solutions. The most simple (but not the better) I could think is to create a variable to control if your form can be submitted. When you click the submit, it will call a javascript function that open you dialog, and return false, so the form will not be submited.

When the dialog closes, if the form is valid, it will submit the form.

Try this, to set a client function on click:

 <cc1:FlatButton ID="btnSubmit" runat="server" class="positive" Text="Submit Assessment" OnClick="btnSubmit_Click" OnClientClick="if (validForSubmit) return true; else  return validateForm();" RemoveDiv="True" />

And replace your jQuery code by this Javascript function:

var validForSubmit = false;

function validateForm() {
    $("#WindowMessageDialog").jqxWindow('open');

    $("#messageDialog_btn_no").click(function () {
       alert("answer is no");
       return false;
    });

    $("#messageDialog_btn_yes").click(function () {
       alert("answer is yes");
       // set form as valid for submit
       validForSubmit = true;
       // fire the click, because the form is now valid
       $("#ctl00_ContentArea_btnSubmit").click();
       return true;
    });

    return false;
}

You may need to fix something, but this is the idea, hope it helps.