javascript - Multiple AJAX forms with the same ID on the same page -
i have 2 ajax newsletter subscribe forms on same page (top , bottom). both forms have same id. top form works perfectly, i'm unable alert messages appear in bottom form.
i found this question wasn't sure how implement answer code.
here's form:
<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>
here's 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 entered invalid email address! please try again.'); } else { newsletteralert('subscribing now...'); data = $form.serialize(); $.ajax({ url: 'path_to_subscribe_php', type: 'post', data: data, success: function(msg) { if ( msg === 'success') { newsletteralert('success! please check email confirm.'); $email.val(''); } else { newsletteralert( msg ); } }, error: function(msg) { newsletteralert('error! ' + msg.statustext); } }); } }); })();
any appreciated. thanks
don't use same id top , bottom forms.
an
id
must unique in document -- see mdn docs.
instead have 2 separate id
's , reference them both in 1 jquery call when binding submit
event:
$('#newsletter_top, #newsletter_bottom').on('submit', function(e) { // ... });
and in html:
<form id="newsletter_top" ...> </form> <form id="newsletter_bottom" ...> </form>
Comments
Post a Comment