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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -