Jquery and AJAX not even triggering

Question

I have this piece of code. It's a input for a newsletter.

<form id="newsletter-form" name="newsletter-form" method="post" action="/newsletter">
  <div class="form-group">
    <label for="exampleInputEmail1"><span>Cadastre-se em nossa newsletter</span></label>
    <input type="email" class="form-control" id="newsletter-email" name="newsletter-email" placeholder="e-mail" value="">
  </div>
  <button class="btn btn-secondary btn-block" type="button"><i class="fas fa-paper-plane fa-fw mr-1"></i>Cadastrar</button>
</form>

Quite simple!

And I have this JS:

$(function()
{
  var form = $('#newsletter-form');
  // ----------
  $(form).submit(function(form_response)
  {
    form_response.preventDefault();
    var formData = $(form).serialize();
    $.ajax({
      type: 'POST',
      url:  $(form).attr('action'),
      data: formData
    })
    .done(function(response)
    {
      $('#newsletter-email').removeClass('is-invalid');
      $('#newsletter-email').addClass('is-valid');
      $('#newsletter-email').val(response);
    })
    .fail(function(data)
    {
      $('#newsletter-email').removeClass('is-valid');
      $('#newsletter-email').addClass('is-invalid');
      if (data.responseText !== '')
      {
        $('#newsletter-email').val(data.responseText);
      }
      else
      {
        $('#newsletter-email').val('Ocorreu um erro!');
      }
    });
  });
});

My PHP check if email is valid, if already is inserted, etc, etc. The PHP returns codes and echos correctly(I use it on other parts of my website)

The thing is:this form is not even triggering the JS to run the PHP. It should run the PHP and add a is-valid or is-invalid class on the inpute and show the feedback as value or placeholder.

Any ideas why it's not working?

Answer 1

Just to add it as answer your button type was button not submit so eaither use input type submit or change button type to submit :D