title: Why form is not submitting on Ajax call
body: <p>I have the following code whereby it validates an array and if the array is empty, it should submit a form called <code>deleteUnitManagement</code>. Else it should show a modal with the array values in it. Here the <code>errorFunction</code> is a modal.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#deleteUnitButton").click(function() {
    if ($("#deleteUnit").val().trim().length == 0) { //If unit field is empty
      $("#deleteUnit").css("border-color", "red");
      er("Please select a Unit name");
      errorFunction("Error in Processing", "Please select a Unit name");
      return false;
    } else if ($("#deleteUnit").val() == "Not Applicable") {
      er("This is a default unit name selection. Cannot delete");
      errorFunction("Error in Processing", "This is a default unit name selection. Cannot delete");
      return false;
    } else { //The following Ajax is checking if there is an existing user present with the unit that selected to delete. If there is then it will ask to change those users unit to some other units before do this deleting operation
      var unitNum = $("#deleteUnit").val();
      var isThereUser = false;
  
      $.ajax({
        type: "POST",
        url: "unitCheck.php",
        data: {
          unitNum: unitNum
        },
        success: function(result) {
          var returnedData = JSON.parse(result);
          var length = returnedData.length;
          var users = "";
          if (length != 0) {
            isThereUser = true;
            for (i = 0; i &lt; length; i++) {
              if (i == 0) {
                users = users + returnedData[i];
              } else {
                users = users + ", " + returnedData[i];
              }
            }
            errorFunction("Error in Processing", "There are " + length + " user(s) (" + users + ") assigned to this floor. Please change their units first before deleting this unit");
  
          } else {
            $("#deleteUnit").css("border-color", "");
            $("#deleteUnitManagement").submit();
          }
        }
      });
      return false;
    }
  
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Following is the codes in <code>unitCheck.php</code></p>
  <pre><code>$unitNum = $_POST['unitNum'];
  $userNames = [];
  
  $query = &quot;SELECT userName FROM users WHERE userUnit=?&quot;;
  $stmt = mysqli_stmt_init($conn);
  if(!mysqli_stmt_prepare($stmt, $query)){
      echo &quot;Selecting user names from users table query failed&quot;;
  }else{
      mysqli_stmt_bind_param($stmt,&quot;s&quot;, $unitNum);
      mysqli_stmt_execute($stmt);
      $result = mysqli_stmt_get_result($stmt);
  }
  while($rows = mysqli_fetch_array($result)){
      $name = $rows['userName'];
      array_push($userNames, $name);
  }
  echo json_encode($userNames);
  </code></pre>
  <p>The code is working fine for conditions whereby array is not empty. It will pop up modal window with all the array values. But if the array is empty, it is not submitting the form. Does anyone know why?</p>
  <p><strong>Edit 1</strong></p>
  <p>Simplified code with no <code>Ajax</code> and included all <code>HTML</code> elements. You can comment out <code>returnedData</code> variable lines to enable and disable empty and non empty condition. Over here also if the array is not empty, it is alerting elements in that array. But once it is empty, the form is not submitting and showing echoing message <code>deleted</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#deleteUnitButton").click(function() {
    var returnedData = [];
    //        var returnedData = ["sdfs", "sdfdssf"];
    var length = returnedData.length;
  
    var users = "";
    if (length != 0) {
      isThereUser = true;
      for (i = 0; i &lt; length; i++) {
        if (i == 0) {
          users = users + returnedData[i];
        } else {
          users = users + ", " + returnedData[i];
        }
      }
      alert(users);
    } else {
      $("#deleteUnit").css("border-color", "");
      $("#deleteUnitManagement").submit();
    }
    return false;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="col-sm-3"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-body"&gt;
        &lt;div style="padding:20px;"&gt;
          &lt;h3 class="text-center"&gt;&lt;img src="" id=""&gt;Delete Unit&lt;/h3&gt;
        &lt;/div&gt;
        &lt;form method="post" id="deleteUnitManagement" name="deleteUnitManagement"&gt;
          &lt;button type="submit" id="deleteUnitButton" name="deleteUnitButton" class="btn btn-danger"&gt;Delete Unit&lt;/button&gt;
        &lt;/form&gt;
        &lt;?php
              if(isset($_POST['deleteUnitButton'])){
                  echo 'deleted';  
              }
          ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>