Jquery 和 AJAX 甚至没有触发

Question

我有这段代码。这是新闻通讯的输入。

<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>

很简单！

我有这个 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!');
      }
    });
  });
});

我的 PHP 检查电子邮件是否有效，是否已插入等等。 PHP returns 代码和回显正确（我在我网站的其他部分使用它）

is:this 表单甚至没有触发 JS 到运行 PHP。它应该运行 PHP 并在输入上添加有效或无效 class 并将反馈显示为值或占位符。

知道为什么它不起作用吗？

Answer 1

这是您的原始代码。 var form = $('#newsletter-form');

既然你把form标签放到了一个变量里，就不用再用了$。将 $(form) 更改为 form。代码将如下所示。

form.submit( /* some code */ );

或者如果不想存入变量，可以直接调用jquery中的函数。

$('#newsletter-form').submit( /* some code */ );

Answer 2

只是将其添加为答案，您的按钮类型不是按钮提交，因此要么使用输入类型提交，要么更改按钮类型以提交 :D

Jquery 和 AJAX 甚至没有触发

Jquery and AJAX not even triggering

php

ajax

jquery

response