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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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

Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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
Avatar of Miguel Oz
Miguel Oz
Flag of Australia image

Blurred text
THIS SOLUTION IS 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
Avatar of bissellGR
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
ASKER CERTIFIED SOLUTION
Avatar of bissellGR
bissellGR

Blurred text
THIS SOLUTION IS 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.
Avatar of bissellGR
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.
Avatar of nap0leon
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.
Avatar of bissellGR
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.
Avatar of bissellGR
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
ASP.NET
ASP.NET

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications

128K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo