Accidentally coded infinite loop into my ASP.NET MVC app's jQuery code

Question

I'm getting the following error with the following JavaScript code:

RangeError: Maximum call stack size exceeded

I'm assuming that this means that I accidentally coded an infinite loop into my JavaScript. This code is from an ASP.NET MVC application that uses jQuery Validate. The purpose of this code is to check for images captured on the page prior to submission.

Essentially, this is another piece of front-end validation that needs to occur alongside jQuery Validate. It seems as though my only option is to run this code on submitting the form, especially since no other events happen between the "submit" button click and submission. Here is the code:

$('form').submit(function (e) {
    e.preventDefault();
    //If Corporation is selected as business type
    if ($('#businessStructure').val() == "Corporation") {
       //Checks CEO signature present
       if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
            alert("Please sign and save your signature in the CEO signature pad");
            $("#ceoError").show();
       }
       else {
           //all good, an image exists
           $('form').submit();
       }
     }
    //If Sole Proprietor is selected as business type
    else if ($('#businessStructure').val() == "SoleProprietor") {
       //Checks CEO signature present
       if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
           alert("Please sign and save your signature in the CEO signature pad");
           $("#ceoError").show();
       }
       //Checks partner1 signature present
       if ($("#signImage1").length == 0 || $("#signImage1").attr("src") == "") {
           alert("Please sign and save your signature in the first partner signature pad");
           $("#partner1Error").show();
       }
       else {
           //all good, an image exists
           $('form').submit();
       }
     }

     else {
        //Checks CEO signature present
        if ($("#signImage").length == 0 || $("#signImage").attr("src") == "") {
            alert("Please sign and save your signature in the CEO signature pad");
            $("#ceoError").show();
        }
        //Checks partner1 signature present
        if ($("#signImage1").length == 0 || $("#signImage1").attr("src") == "") {
            alert("Please sign and save your signature in the first partner signature pad");
            $("#partner1Error").show();
        }
            //Checks partner2 signature present
            if ($("#signImage2").length == 0 || $("#signImage2").attr("src") == "") {
                alert("Please sign and save your signature in the second partner signature pad");
                $("#partner2Error").show();
            }
            else {
                //all good, an image exists
                $('form').submit();
            }
     }
});

This is the first time I have done a concurrent event with a MVC app form submission. Is there a different approach I am unaware of?

That's because you're calling `$('form').submit();`. If you want it to do the normal form submission, don't call `e.preventDefault()`. — Mike Cluck, Oct 10 '17 at 20:23
You're calling the function `$(form).submit()` over and over again. It's recursion. This may be helpful: https://stackoverflow.com/questions/7065120/calling-a-javascript-function-recursively — colecmc, Oct 10 '17 at 20:25
I tried changing the event from $('form').submit(function (e) to $('#submitButton').click(function (e), but it is not working correctly. The alert box is appearing, but the form is still submitting. Any ideas? — cryan, Oct 11 '17 at 15:36
Why have you written this JavaScript/jQuery form validation from scratch if you're already using the jQuery Validate plugin? — Sparky, Oct 12 '17 at 15:44
It's a weird situation. I am using this jSignature plugin as a signature pad for the app. When the user draws and saves their signature, a unique string is generated and saved in a signature textbox (an image is generated as well). The signature textboxes are hidden on the page so jQuery Validate isn't picking them up on clicking the submit button. Yesterday I solved the issue by showing the signature textboxes on the screen for a millisecond on clicking the submit button. That way jQuery Validate would interact with those textboxes. It's the only solution I have found so far. — cryan, Oct 12 '17 at 16:20

Shyju · Answer 1 · 2017-10-10T20:44:45.830

1

As others have mentioned in the comments, you are calling the submit method on the form inside the code which will make the entire code executes again including your else condition, which in turn calls the submit again, hence causing the infinite submit events

else {
           //all good, an image exists
           $('form').submit();
       }

To fix this, you can wire up your event using the button id inside the form

<form action="someUrl" method="post">
   <button type="button" id="btn-save">Save</button>
</form>

and the script will be

$("#btn-save").click(function(e){
  e.preventDefault();
  // your existing code 
});

To get a refernce to the form, I would recommend getting the form using relative selectors. In this case, closest() method will be handy

$("#btn-save").click(function(e){
  e.preventDefault();
  var $form = $(this).closest("form");

  if(yourValidationCodeGoesHere)
  {

  }
  else
  {
    $form.submit();
  }

});

edited Oct 10 '17 at 20:44

answered Oct 10 '17 at 20:39

Shyju

214,206
104
411
497

My original intent was to have all of this code happen on the button click. Unfortunately, it hasn't been working correctly. The alert pops up, but the form continues to submit. – cryan Oct 11 '17 at 15:34
If you have `e.preventDefault();`, the form should not submit. – Shyju Oct 11 '17 at 15:39
Ok, I just tried the code again (realized that e.preventDefault(); was commented out), and now I'm running into another issue. The code is doing almost exactly what I need, but after the alert happens and I enter in the signature that's missing, I am no longer able to click the submit button. How do I restore function to the submit button after the user fixes their mistake? – cryan Oct 11 '17 at 15:48
the code you provided does not have anything to disable the save button. Do you have some other piece of code which is disabling it ? – Shyju Oct 11 '17 at 15:55
Looks like I'm getting an error: RangeError: Maximum call stack size exceeded. At this point, I should probably just create a new post. Seems like I'll need to stay with the click event and figure out how to deal with this error. – cryan Oct 11 '17 at 16:24
Looks like you still have some recursive calls which his causing it. You need to go through your code for recrursive calls and fix it – Shyju Oct 11 '17 at 16:36

Accidentally coded infinite loop into my ASP.NET MVC app's jQuery code

1 Answers1