Avatar of bissellGR
bissellGR
 asked on

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

JavaScriptASP.NETjQueryBootstrap

Avatar of undefined
Last Comment
bissellGR

8/22/2022 - Mon
Julian Hansen

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 Baldwin

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/
SOLUTION
Miguel Oz

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
bissellGR

ASKER
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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
bissellGR

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
bissellGR

ASKER
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.
nap0leon

@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.
bissellGR

ASKER
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
bissellGR

ASKER
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