Archive

Posts Tagged ‘RegisterOnSubmitStatement’

Disable submit button from client side

October 30th, 2009 5 comments

It seems very easy to disable ASP .Net submit button, but there are a lot of complications to perform this seemingly small thing. Usually when you disable ASP .Net submit button, it stops further processing. So if you disable button from JavaScript onclick function, it will not do postback. Sometime you want to disable submit button before page postback, for example if you have a file upload form and your code take some time to upload a big file, you might like to disable submit button. There are different solutions to solve this issue.
First solution is you can call the postback from client side JavaScript. For this I will prefer to write the JavaScript code from code behind file. You can attach an attribute like this

submit.Attributes.Add(“onclick”, “this.disabled=true;” + Page.ClientScript.GetPostBackEventReference(submit, “”));

But the problem with this solution is, if you have ASP .Net validation implemented on the controls. Even if it fails validation it fires post back event. In my form I also had ASP .Net validator. So I choose another option.
Solution is very simple, create another button with same text value and keep hidden. On client click of actual submit button hide submit button and show the hidden button. Make sure hidden button should be disabled. You can disable it from JavaScript as well. In this way user will not get idea that it’s a different button and it will also give an effect of disabled button.
Now if you are using ASP .Net validation, you would probably like to disable submit button when page validation is successful. So here is the code you can use.

protected override void OnInit(EventArgs e)
{
Button Submit = (Button)FindTemplateControl(“submit”);
Button Cancel = (Button)FindTemplateControl(“cancel”);
Button HiddenSubmit = (Button)FindTemplateControl(“hiddensubmit”);

string script = “if (!(typeof (ValidatorOnSubmit) == \”function\” && ValidatorOnSubmit() == false))”;
script += “{ “;
script += @”document.getElementById(‘” + Submit.ClientID + “‘).style.display=’none’;”;
script += @”document.getElementById(‘” + HiddenSubmit.ClientID + “‘).style.display=’inline’;”;
script += @”document.getElementById(‘” + HiddenSubmit.ClientID + “‘).disabled=true;”;
script += @”document.getElementById(‘” + Cancel.ClientID + “‘).disabled=true;”;
script += @” } “;
script += @”else “;
script += @”return false;”;

Page.ClientScript.RegisterOnSubmitStatement(Page.GetType(), “DisableSubmitButton”, script);
}

Have fun :)

Success message using ASP .Net validators

October 29th, 2009 2 comments

Recently we have implemented a form containing file upload controls. We have used ASP .Net validators to validate fields. In ASP .Net validation you can display error message in Recently we have implemented a form containing file upload controls. We have used ASP .Net validators to validate fields. In ASP .Net validation you can display error message in ValidationSummary control, but you can’t display success message. My case was I had to display a message to users before file upload start. And obviously this message needs to appear after successful page validation and before page do a post back. So in case file upload take some time, user can see a message that file upload processing has been started.
Here how I achieve it. When you use ASP .Net validator in page, your ASP .Net validator generates some JavaScript code in page. If you see the source of html page you can see this function.

function WebForm_OnSubmit()
{
    if (typeof(ValidatorOnSubmit) == “function” && ValidatorOnSubmit() ==false)
        return false;
    return true;
}

Now you need to write some code for on submit function. Create a div in your page and add your message in it. Set the display as  none in style property. Here is the div I used for my file upload form.

<div id=”successmessage” style=”display:none; color:Red>
“Please wait for your confirmation message while we upload your files (for large files this may take a few minutes)”
</div>

Now add this piece of code in cs file.

protected override void OnInit(EventArgs e)
{
    string script = “if (typeof (ValidatorOnSubmit) == \”function\” && ValidatorOnSubmit() == false)”;
    script += @”return false;”;
    script += @”else “;
    script += @”document.getElementById(‘successmessage’).style.display=’block’”;
    Page.ClientScript.RegisterOnSubmitStatement(Page.GetType(), “SuccessMessage”, script);
}

That’s all, now when you press submit button, it validates page and display success message if successful. After implementing this code your html page source will be like this

function WebForm_OnSubmit()
{
    if (typeof (ValidatorOnSubmit) == “function” && ValidatorOnSubmit() == false)
        return false;
    else
        document.getElementById(‘successmessage’).style.display=’block’;

    if (typeof(ValidatorOnSubmit) == “function” && ValidatorOnSubmit() == false)
        return false;
    return true;
}