JavaScript statements not getting executed after jquery function

Question

I have the following HTML

<form onsubmit="call_it()" action="listing.php" method="get">

In the called function the alert('3') is not getting called. The jQuery each function is working perfectly but not sure why nothing is getting executed after that.

function call_it() {
  alert('2');

  $('.form_field').each(function(i, obj) {
    if (this.value == "") {
      document.getElementById(this.id + '_blank').style.display = "block";
    }
  });

  alert('3');
  ///other statements
}

Answer 1

I am calling this on <form onsubmit="call_it()" action="listing.php" method="get">

In this case the issue is because the form is actually being submit. Hence the page is unloaded, and all JS processing is cancelled, before alert('3') is reached.

To fix this, first remove the outdated on* event handler and use unobtrusive JS to attach your event handlers, and secondly, stop the form submission if the validation fails. Try this:

<form action="listing.php" method="get" id="theForm">
  <!-- HTML inputs here... -->
</form>

$('#theForm').submit(function(e) {
  alert('2');

  $('.form_field').each(function(i, obj) {
    if (!this.value) {
      e.preventDefault();
      $('#' + this.id + '_blank').show();
    }
  });

  alert('3');
});

Working example