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

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

LVL 2
bissellGRAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

0
Dave BaldwinFixer of ProblemsCommented:
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/
0
Miguel OzSoftware EngineerCommented:
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?
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Download your Guide
bissellGRAuthor 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
0
bissellGRAuthor Commented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bissellGRAuthor 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.
0
nap0leonCommented:
@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.
0
bissellGRAuthor 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.
0
bissellGRAuthor 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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.