Button - only do a postback if JavaScript function returns true

Question

I have a button in ASP.NET. When the user clicks the button, I want to make some validation beforehand, so the postback only occurs if the validation method returns true.

My thought was to use the logic of the OnClientClick of the button. If you say OnClientClick="return false;", it won't give a postback, while returning true will. However, that's not working, as the resulting behaviour is it doesn't make a postback even though what my jQuery method returns.

Currently I have:

Markup:

<asp:Button runat="server" ID="ReplyBtn" OnClientClick="return ValidateInput();" OnClick="ReplyBtn_Click" CssClass="btn-large btn-success"
    Text="Answer" />

JavaScript:

function ValidateInput() {
        var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
        var options = {
            type: "POST",
            url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
            data: '{"content":"' + value + '"}',
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);

                if (msg.ReplyToPostFeedbackResult) {
                    return false;
                } else {
                    return true;
                }

            },
            error: function () {
                return true;
            }
        };
        $.ajax(options);
        return false;
    }

    function stripHtml(str) {
        return $('<div />', { html: str }).text();
    }

So basically, what's wrong with this code? And how can I perform validation on my button before making a postback?

score 4 · Accepted Answer · 2012-11-16 19:39:46Z

4

Your function unconditionally returns false, since you aren't using the response from the ajax object. For example, let us assume your server side script returns the text "OK" if your validation succeeds. You could try something like this:

function ValidateInput() {
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var options = {
        type: "POST",
        url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
        data: '{"content":"' + value + '"}',
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);
        }
    };
    var resp = $.ajax(options);
    return (resp.status==200 && resp.responseText == "OK");
}

Ideally, what you would do is unconditionally return false, and trigger a postback yourself in the success handler.

edited Nov 16, 2012 at 19:39

answered Nov 16, 2012 at 19:22

user1726343

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

1 Comment

Lars Holdgaard Over a year ago

Thanks - that solution worked and will work short term.. :-) We will definetely consider triggering a postback instead . Thanks again.

Danny Scott · Accepted Answer · 2012-11-16 19:28:47Z

Not 100% on what you're asking, but I believe the problem is that the function is always returning false even when you expect it to return true from the ajax request?

As mentioned above, ajax running async would cause this not to work but it looks like you're setting async to false.

The issue is your returns.

return true; inside the ajax function returns out of the success function of the ajax call, not the overall function.

I don't think this is the best way to achieve what you're going for, but based on the code you already have, here is what I think you need.

function ValidateInput() {
    var replayToPost = false;
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var options = {
        type: "POST",
        url: "../../Services/ForumOperationService.svc/ReplyToPostFeedback",
        data: '{"content":"' + value + '"}',
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);

            if (msg.ReplyToPostFeedbackResult) {
                replayToPost = false;
            } else {
                replayToPost = true;
            }

        },
        error: function () {
            return true;
        }
    };
    $.ajax(options);
    return replyToPost;
}

nerdybeardo · Accepted Answer · 2012-11-16 19:32:54Z

1

The return result in your ajax function will be a return from the success or error methods therefore it will not bullble up to the ValidateInput() method. You will need to declare a variable outside of the scope of your ajax call and then return that result.

function ValidateInput() {
    var value = stripHtml(CKEDITOR.instances['ReplyBox'].getData()).trim();
    var result = false;

    $.post("../../Services/ForumOperationService.svc/ReplyToPostFeedback", '{"content":"' + value + '"}', function (msg) {
            $("#StatusReplyLbl").text(msg.ReplyToPostFeedbackResult);
            if (!msg.ReplyToPostFeedbackResult){
                result = true;
            }
    });

    return result;
}

answered Nov 16, 2012 at 19:32

nerdybeardo

4,70525 silver badges32 bronze badges

Collectives™ on Stack Overflow

Button - only do a postback if JavaScript function returns true

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related