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 () {
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.
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
Open in new window