On Form Submit - sending true/false not working for Chrome or IE8-

bissellGR
bissellGR used Ask the Experts™
on
I have a C# .Net MVC web site that I have stood up. The site is being displayed within an IFrame in a classic ASP site. This is being done because we are in the process of converting the site over to a .Net 4.5 solution, but needed a particular piece of functionality completed.

Problem
1) The user fills out a form
2) The click the submit button
3) Validation occurs using JavaScript (and jQuery in particular). If validation is successful, then return true, else return false.

If false, then the user is supposed to stay on the page and error messages are revealed.
If true, then the user is supposed to get a greyed out screen while the page is processing and sending to the server. It will then transition over to the new server

What is happening is the page is getting stuck and not transitioning to the next page when the result is true.

This happens in Chrome and versions of Internet Explorer 8 and less.  

I have tried to code on both the form object ($(document).on("submit", "#PartnerCartForm", function(){});) as well as on the button with the same results.

jQuery Code:
   $(document).on("click", '#submitOrder', function () {
        var isValid = false;

        // Step 1. Disable Submit button
        $(this).prop('disabled', true);
        $(".bhiErrorInput").css({ 'display': 'none' });

        // Step 2. Update text on submit Button
        $(this).val("Processing...");

        // Step 3. Disable all form fields
        $("input[type=text]").prop('disabled', true);
        $("select").prop('disabled', true);

        // Step 4. Grey out the Screen
        $('#thickBoxGreyScreen').css({ opacity: 0.7, 'width': $(document).width(), 'height': $(document).height() });
        $('body').css({ 'overflow': 'hidden' });
        $('#thickBoxInfoPane').css({ 'display': 'block' });

        isValid = validateOrder();    // set of methods that return true or false


        if (!isValid) {
            $('#thickBoxGreyScreen').css({ 'display' : 'none' })
            $('#thickBoxInfoPane').css({ 'display': 'none' })

            $(this).val("Submit Order");
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
            $(this).prop('disabled', false);
        }
        else {
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
        }
        event.returnValue = isValid;
        return isValid;
    });     // end of $(document).on("click", '#submitOrder', function () {

Open in new window


HTML

        @using (Html.BeginForm("PartnerCartSubmit", "Partner", FormMethod.Post, new { id = "PartnerCartForm" }))
        {
            @Html.AntiForgeryToken()
            if (!String.IsNullOrEmpty(ViewBag.ErrorMessage))
            {
            <div class="bhiErrorBar">
                @Html.Raw(ViewBag.ErrorMessage)
            </div>
            }
    <h1 class="standardText">Addresses</h1>
            <div id="bhiAddressDiv">
                <div class="bhiAddressDetail">
...
...   // HTML of the form removed for simplification. 
...
            </div>
            <input type="submit" value="Submit Order" id="submitOrder" />

            <div class="clear"></div>

            <div id="thickBoxInfoPane">
                <p>Your payment is being processed...</p>
            </div>
            <div id="thickBoxGreyScreen"></div>

        }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Try this code
   $(document).on("click", '#submitOrder', function (e) {
        var isValid = false;

        // Step 1. Disable Submit button
        $(this).prop('disabled', true);
        $(".bhiErrorInput").css({ 'display': 'none' });

        // Step 2. Update text on submit Button
        $(this).val("Processing...");

        // Step 3. Disable all form fields
        $("input[type=text]").prop('disabled', true);
        $("select").prop('disabled', true);

        // Step 4. Grey out the Screen
        $('#thickBoxGreyScreen').css({ opacity: 0.7, 'width': $(document).width(), 'height': $(document).height() });
        $('body').css({ 'overflow': 'hidden' });
        $('#thickBoxInfoPane').css({ 'display': 'block' });

        isValid = validateOrder();    // set of methods that return true or false


        if (!isValid) {
            $('#thickBoxGreyScreen').css({ 'display' : 'none' })
            $('#thickBoxInfoPane').css({ 'display': 'none' })

            $(this).val("Submit Order");
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
            $(this).prop('disabled', false);
            e.preventDefault();
        }
        else {
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
        }
    });     // end of $(document).on("click", '#submitOrder', function () {

Open in new window

Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
The conventional way to do that is with an 'onsubmit' statement in the <form...> tag.  That works in all browsers.

Which version of jQuery?  The 2.0 version does not work with earlier browsers.
http://jquery.com/download/
Miguel OzSenior Software Engineer
Top Expert 2009
Commented:
Best practice is to use submit in your target form. My first suggestion will be to replace:
 $(document).on("click", '#submitOrder', function () {
   //existing code
    }
});

Open in new window

with:
$('#PartnerCartForm).submit(function(event) {
    //existing code
   }
});

Open in new window

where PartnerCartForm is your Id form.

Keep in mind that when you run in IE8:
1) Some of your HTML page tags(from MVC) are not valid because IE8 does not support HTML 5.
2) IE does not allow mixing IE9+ and older modes in a frame hierarchy, thus if you run your main page in IE 8, your IFRAME runs in IE8 too.

My suggestion will be to check all your third party libraries on the MVC project if they support IE8.
If your JQUERY version is 1.11 or earlier you should be OK. Be aware that Chrome support is only for the current version  and previous version as shown here.

Note: IF more help needed please answer:
Q1. What Chrome version are you using?
Q2. Which mode (compatible mode or standard) is your main web site running?
Q3. What is the document mode of your MVC page? EDGE?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks everyone for the suggestions. I will try them out.

I am using:

jQuery 1.10.2.min
bootstrap 3.0
modernizer 2.6.2
respond.js 1.2

MVC 5
Ok, so the final solution for the JavaScript is this:

    $('#PartnerCartForm').submit(function(){
        var isValid = false;

        // Step 1. Disable Submit button
        $('#submitOrder').prop('disabled', true);
        $(".bhiErrorInput").css({ 'display': 'none' });

        // Step 2. Update text on submit Button
        $('#submitOrder').val("Processing...");

        // Step 3. Disable all form fields
        $("input[type=text]").prop('disabled', true);
        $("select").prop('disabled', true);

        // Step 4. Grey out the Screen
        $('#thickBoxGreyScreen').css({ opacity: 0.7, 'width': $(document).width(), 'height': $(document).height() });
        $('body').css({ 'overflow': 'hidden' });
        $('#thickBoxInfoPane').css({ 'display': 'block' });

        isValid = validateOrder();


        if (!isValid) {
            $('#thickBoxGreyScreen').css({ 'display' : 'none' })
            $('#thickBoxInfoPane').css({ 'display': 'none' })

            $('#submitOrder').val("Submit Order");
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
            $('#submitOrder').prop('disabled', false);
        }
        else {
            $("input[type=text]").prop('disabled', false);
            $("select").prop('disabled', false);
        }
        event.returnValue = isValid;
        return isValid;
    });     // end of $(document).on("click", '#submitOrder', function () {

Open in new window


I had to disable the button and change the event to the submit on the form.

Author

Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for bissellGR's comment #a41029213

for the following reason:

Tested in IE, Firefox, and Chrome.

The submit event allows for Firefox and Chrome to work. Changing the disable to the button (once the submit event was fired on the form) allowed IE to capture the values as well.
Top Expert 2011

Commented:
@BissellGR,
Unless you developed the solution independently from MiguelOz's suggestion posted 5 days earlier, you should accept his solution and award him the points.

Author

Commented:
I am willing to award him partial credit for the solution. Switching to the Form.submit method was only part of the solution. The rest of the solution allowed for the submission of the values themselves (because nothing was being submitted because the form itself was "disabled"). I had to fix that part. Additionally, I did resolve the problem independently, however, regardless of that, I still believe he deserves partial credit for posting a solution. I apologize for not doing that, as I am still new on the system personally.

Author

Commented:
My solution contained the full solution including enabling the form for the submission of the values, over and above just switching from .on("submit") to .submit

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial