同一页面上具有相同ID的多个AJAX表单

Question

我在同一页面上（顶部和底部）有两个AJAX新闻订阅表单。 两种形式具有相同的ID。 顶部窗体工作正常，但是我无法使警报消息显示在底部窗体中。

我找到了这个问题，但是不确定如何在我的代码中实现答案。

形式如下：

        <div class="newsletter">
            <form id="newsletter" class="newsletter-signup" action="" method="POST" accept-charset="UTF-8">
                <input id="hero-section-newsletter-email-input" type="email" name="email">
                <button class="button" type="submit">
                    Subscribe
                </button>
                <div id="newsletter-alert" style="display: none;" data-alert></div>
            </form>
        </div>

这是jQuery：

(function() {
  'use strict';

  var newsletterAlert = function(message) {
    $('#newsletter-alert').text(message);
  };

  var isValidEmail = function(email) {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    return pattern.test(email);
  };

  $('#newsletter').on('submit', function(e) {
    var data,
        $form = $(this),
        $email = $form.find('input[type="email"]');

    e.preventDefault();
    $('#newsletter-alert').show();

    if ( !isValidEmail( $email.val() )) {
      newsletterAlert('Looks like you entered an invalid email address! Please try again.');
    } else {
      newsletterAlert('Subscribing you now...');
      data = $form.serialize();

      $.ajax({
        url: 'PATH_TO_SUBSCRIBE_PHP',
        type: 'post',
        data: data,
        success: function(msg) {
          if ( msg === 'success') {

            newsletterAlert('Success! Please check your email to confirm.');
            $email.val('');
          } else {
            newsletterAlert( msg );
          }
        },
        error: function(msg) {
          newsletterAlert('Error! ' + msg.statusText);
        }
      });
    }
  });
})();

任何帮助，将不胜感激。 谢谢

Answer 1

顶部和底部表单不要使用相同的ID。

id在文档中必须是唯一的-请参阅MDN文档 。

而是具有两个单独的id ，并在您绑定到submit事件时在一个jQuery调用中同时引用它们：

$('#newsletter_top, #newsletter_bottom').on('submit', function(e) {
    // ...
});

并在您的HTML中：

<form id="newsletter_top" ...>
</form>

<form id="newsletter_bottom" ...>
</form>