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返回代码并正确回显（我在网站的其他部分使用了它）

问题是：这种形式甚至没有触发JS运行PHP。它应该运行PHP，并在inpute上添加一个is-valid或is-invalid类，并将反馈显示为值或占位符。

有什么想法为什么不起作用？

Answer 1

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

由于已将form标签放入变量中，因此无需使用$。将$(form)更改为form。代码将如下所示。

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

或者如果您不想将其存储到变量中，则可以直接从jquery中调用该函数。

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

Answer 2

只需将其添加为答案，您的按钮类型就是按钮未提交，因此可以使用输入类型Submit或更改按钮类型来提交：D

jQuery和AJAX甚至不触发

2 个答案: