Stopping button OnClick event with javascript

Question

I'm trying to run some javascript before my button's click event happens on the server side, but the javascript code runs, and the server side code runs right after that no matter what. Here's what I have:

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    SubmitClick = function() {
        if ($("#<%= fuFile.ClientID %>").val() == "") {
            $("#error").html("File is required");

            return false;
        }
    }
  });
</script>

<asp:FileUpload ID="fuFile" runat="server" />

<asp:Button ID="btnSubmit" runat="server" Text="Submit"
  OnClientClick="SubmitClick()" UseSubmitBehavior="false"
  OnClick="btnSubmit_Click" />

<span id="error"></span>

I thought that setting UseSubmitBehavior="false" and returning false in the javascript function would work, but it's not. My error message gets displayed for a second before the server side code runs.

What am I doing wrong here?

A good read as to when you should return false. fuelyourcoding.com/jquery-events-stop-misusing-return-false — CraigW
– CraigW, Commented Oct 8, 2012 at 21:42

Jeremy · Accepted Answer · 2012-10-08 21:22:19Z

12

Typically to cancel a client click you would add this return false;

You can update your code to do this and it should work: OnClientClick="return SubmitClick();"

answered Oct 8, 2012 at 21:22

Jeremy

9,0402 gold badges39 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jupaol · Accepted Answer · 2012-10-08 21:29:28Z

6

If you are using JQuery:

$btn.on("click", function (e) {
    e.preventDefault();
}

answered Oct 8, 2012 at 21:29

Jupaol

21.4k9 gold badges71 silver badges101 bronze badges

1 Comment

nick_w Over a year ago

You will need to combine this with setting UseSubmitBehavior back to true for this to work, otherwise it just posts back regardless.

nick_w · Accepted Answer · 2012-10-08 21:34:30Z

3

What worked for me was: Remove OnClientClick="SubmitClick()" and set UseSubmitBehavior back to true.

Then change your $(document).ready() method to

$(document).ready(function () {
    $('#btnSubmit').click(function () {
        if ($("#<%= fuFile.ClientID %>").val() == "") {
            $("#error").html("File is required");

            return false;
        }

        return true;
    });

});

answered Oct 8, 2012 at 21:34

nick_w

15k3 gold badges55 silver badges72 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-10-08 21:22:42Z

0

You need to return the cancellation of the submitted behavior using return in OnClientClick event.

try this

OnClientClick="return SubmitClick()"

answered Oct 8, 2012 at 21:22

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Stopping button OnClick event with javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related