Multiple dynamic forms, e.preventDefault(); not triggering properly

Question

I have a PHP page that is generating multiple forms (checkboxes) that I want to update the database when they are toggled - without reloading the page. I have them with a shared class (prim) and each has an id (primary1, primary2, etc).

onChange="this.form.submit()" is not being caught and prevented with

$(document).on('submit', '.smart-form', function(e) {
    e.preventDefault();
....

Could anyone help me?

Answer 1

The submit event is not sent to the document when calling form.submit() directly.

Reference

Answer 2

$('.smart-form').change(function () {
  
  //do some verification
  $.ajax({
    url: 'photoPrimary.php',
    data: $(this).serialize(),
    success: function(data)
    {
      //callback methods go right here
    }
  });
});