Stopping onclick from firing when onclientclick is false?

Is it possible to use the onclientclick property of a button to do a clientside check. If the check returns true, then fire the onclick event. If the clientside check returns false, don’t fire the onclick event.

Is that possible?

UPDATE:

These 2 work:

Stops the form from submitting:
OnClientClick="return false;"

Allows the form to submit:
OnClientClick="return true;"

The next 2 do not work:

// in js script tag
function mycheck() {
    return false;
}

// in asp:button tag
OnClientClick="return mycheck();"

// in js script tag
function mycheck() {
    return true;
}

// in asp:button tag
OnClientClick="return mycheck();"

It submits the form both times.

Why is that?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You want to add return inside OnClientClick after a function is called. Otherwise, the button will post back even if function returns false.

<asp:button ID="Button1" runat="server" OnClick="Button1_Click" 
    OnClientClick="return checkValidation()" Text="Submit" />

<script type="text/javascript">
    function checkValidation() {
        return confirm('Everything ok?');
    }
</script>

Method 2

Sure. If you use return false within your OnClientClick it will prevent any navigation from happening. So you’re code would look like:

<asp:LinkButton runat="server" OnClientClick="if(!ValidatePage()) { return false;}" />

Method 3

Yes you can, In onclientClick function call use preventDefault()

function onclientClickFun(e)
{
  if(!IsValidationSuccess)
 {
   e.preventDefault();
 }

}

OR

function onclientClickFun(e)
{
  if(!IsValidationSuccess)
 {
   return false;
 }

}

Method 4

In the server page create the button:

var button1 = new Button();  
button1.ServerClick += new EventHandler(button1_ServerClick);
button1.OnClientClick = SetJsForSaveBtn();
button1.Attributes.Add("UseSubmitBehavior", "false");
panel.Controls.Add(button1 );

//Contains the server code

private void saveBtn_ServerClick(object sender, EventArgs e)
{
   //do something if ClientClick returns true
}

//Contains the JS code for the page

LiteralControl js = new LiteralControl();
panel.Controls.Add(js);
js.Text <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e334e">[email protected]</a>"<script type='text/javascript'> 
$(document).ready(function(){
 function CheckValidationOnClient(){
   if(!ValidatePage()){
    return false;
   }
   else{
    return true;
   }
 };
});
</script>   ";

private string SetJsForSaveBtn()
{
  var jsfunc = @" return CheckValidationOnClient()";
  return jsfunc ;
}

Method 5

I came across this issue too. Did not like to have to put the OnClientClick=return false on every linkbutton. With a simple page it just easier to use an anchor and avoid asp filling the href in for you.

However this is not always possible. So a Simple conclusion is just to inherit the LinkButton and add a variable like AutoPostBack. if false then just override the output with the html or add the OnClientClick in. I dont really like inline tags.

namespace My.WebControls {
    [ToolboxData("<{0}:LinkButton runat=server ID=btn></{0}:LinkButton>"), ParseChildren(true), ToolboxItem(true)]
    public class LinkButton : System.Web.UI.WebControls.LinkButton {

         private bool _postback = true;
         [Bindable(true), Category("Behavior"), DefaultValue(true), Description("Gets or Sets the postback click behavior")]
         public bool AutoPostBack { get { return _postback; } set { _postback = value; } }


         protected override void Render(System.Web.UI.HtmlTextWriter writer) {
             if(!AutoPostBack){
                 this.OnClientClick = "return false";
             }
             base.Render(writer);
         }
    }
}

Many attributes should need to be handled in a ViewState but in this case I think we are good;

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0