Why does binding a submit event with `$("#submitButton").submit(function(){})` not work?

Question

I'm trying to figure out why $("#submitButton").submit(function() {}); is not working.

I have this <form> :

<div class="card p-2">
  <form>
    <div class="input-group">
      <label for="inputPasswordAgain" class="sr-only">Password</label>
      <input type="password" id="inputPasswordAgain" class="form-control" placeholder="Please enter your password again!" required>

      <div class="input-group-append">
        <button type="submit" id="submitButton" name="submitButton" class="btn btn-secondary btn-block">Submit Changes</button>
      </div>
    </div>
  </form>
</div>

I've written this AJAX code in jQuery to pass values to the server.

<script type="text/javascript">
  $(document).ready(function() {
    $("#submitButton").click(function() {
      var data = {};
      var i;

      for (i = 0; i < $("#sessionQuantity").html(); i++) {
        data[i] = $("#" + i).val();
      }

      $.ajax({
        type: "POST",
        url: "updateViewing-helper.php",
        data: data,
        success: function() {}
      });
    });
  });
</script>

Everything works fine if I use .click(function(){ … }) , but this will call the updateViewing-helper.php without submitting the form with the <input> and <button> elements. This means the user can skip putting their password in, and just click the button.

I tried to use .submit(function(){ … }) , then use e.preventDefault() , then pass all values into AJAX, then call the updateViewing-helper.php via AJAX, then I can check for the password matching server-side.

But the .submit event is not working: there is not alert or anything.

Answer 1

Call submit on form not on the button

First give id to form

<form id="myForm">

Then call submit on this id

$( document ).ready(function() {
   $("#myForm").submit(function(){

    });
});