Question

I have an ASP.NET MVC ajax form fully working on FireFox. Here’s how the code looks like:

<% using (Ajax.BeginForm("SendMessage", "Contact", new AjaxOptions { OnComplete = "ProcessResult" })) { %>
<div id="inputArea">
    <label for="Name" class="contactLabel">Your Name:</label>
    <%= Html.TextBox("SenderName", Model.Contact.SenderName)%>
    <label for="Email" class="contactLabel">Your Email:</label>
    <%= Html.TextBox("Email", Model.Contact.Email)%>
    <label for="Subject" class="contactLabel">Subject:</label>
    <%= Html.TextBox("Subject", Model.Contact.Subject)%>
    <label for="Message" class="contactLabel">Message:</label>
    <%= Html.TextArea("Message", Model.Contact.Message)%>
</div>
<input type="submit" value="Send" id="submitButton" onclick="allowSubmit(false);" />
<span id="operationMessage"></span>

There are two additional javascripts, one for disabling the submit button (letting user pressing it only once) and the other is for processing of the server result:

    function ProcessResult(content) {

        var json = content.get_response().get_object();
        var result = eval(json);

        $("#operationMessage > span").empty();
        $("#operationMessage > ul").empty();
        $(':input').removeClass('input-validation-error');

        if (result.Successfull) {
            $('#operationMessage').append('<span><br>' + result.Message + '</span>')
                                  .removeClass('error')
                                  .addClass('success');
        }
        else {

            $('#operationMessage').append('<span><br>' + result.Message + '')
                                  .removeClass('success')
                                  .addClass('error');

            for (var err in result.Errors) {
                var propertyName = result.Errors[err].PropertyName;
                var errorMessage = result.Errors[err].Error;
                var message = propertyName + ' ' + errorMessage;

                $('#' + propertyName).addClass('input-validation-error');
                $('#operationMessage > ul').append('<li># ' + message + '</li>');
            }
        }

        allowSubmit(true);
    }

    function allowSubmit(enabled) {
        if (!enabled) {
            $('#submitButton').attr('disabled', 'disabled');
        }
        else {
            $('#submitButton').removeAttr('disabled');
        }
    }

I got it all working on FireFox, but as I was testing it on IE, it didn’t work. As soon as I pressed send button on IE, it disabled (correctly) but there was no server call, meaning server function on MVC controller was never called.

Any help is greatly appreciated.

Answer 1

Okay…found out what the problem is, but why the different behavior between IE and FF…
if you disable the SUBMIT button on ONCLICK event, the whole server call won’t happen on IE (while it does on FF). so, simply by removing the onclick event handler on the page, it worked.