使用javascript停止按钮OnClick事件

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?

Answer 1

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();"

Answer 2

If you are using JQuery:

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

Answer 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;
    });

});

Answer 4

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

try this

OnClientClick="return SubmitClick()"