jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
    <div id="mc_embed_signup_scroll">
	<h2>Melde Dich bei unserem Newsletter an & erhalte 15 % auf Deinen ersten Einkauf!</h2>

<div class="mc-field-group">
	<input type="text" value="" name="FNAME" class="required" placeholder="Vorname" id="mce-FNAME">
</div>

<div class="mc-field-group">
	<input type="text" value="" name="LNAME" class="required" placeholder="Nachname" id="mce-LNAME">
</div>

<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" placeholder="Email-Adresse" id="mce-EMAIL">
</div>

<div class="mc-field-group input-group">
    <strong>Möchtest Du unseren Newsletter erhalten? </strong>
    <ul>
<li>
<label for="mce-group[7316]-7316-0"><input type="checkbox" value="1" name="group[7316][1]" id="mce-group[7316]-7316-0" class="required"> Ja. Ich habe die <a href="https://bonmedico.com/pages/datenschutz" target="_blank">Datenschutzerklärung</a> gelesen</label>
</li>
</ul>
</div>

	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_db40c343b16b0af0b777d7db4_2631affdd7" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Anmelden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

JavaScript

$( "#mc-embedded-subscribe-form" ).submit(function( event ) {
    event.preventDefault();
$("#mce-error-response").css("display", "block");


    
 
 
   
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
    //    console.log('style changed!');
    alert('test');
    
    });    
});

var target = document.getElementById('mce-error-response');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });
  
  
});