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

Question

我在同一页面（顶部和底部）有两个AJAX时事通讯订阅表单。两种表格都有相同的ID。顶部表单完美地工作，但我无法让警报消息出现在底部表单中。

我发现this question，但不知道如何在我的代码中实现答案。

这里的形式：

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

而是有两个单独的id的，并在一个jQuery的呼叫参考他们两个当你绑定到submit事件：

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

，并在你的HTML：

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

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