JSFiddle - React, Tailwind, and code Playground
by ragebunnykickass
HTML
<h3>Free Newsletter</h3>
<p>For the latest news, Webinars and performance information.</p>
<!-- <script type="text/javascript" src="http://forms.aweber.com/form/17/317628917.js"></script> -->
<div class="newsletter_signup_form">
<form action="news_signup.php" method="POST">
<ul>
<li>
<input type="text" name="newsletter_firstname" id="newsletter_firstname" placeholder="First Name" />
</li>
<li>
<input type="text" name="newsletter_surname" id="newsletter_surname" placeholder="Surname" />
</li>
<li>
<input type="email" name="newsletter_email" id="newsletter_email" placeholder="Email Address" />
</li>
<li>
<button name="join_btn">Join</button>
</li>
</ul>
</form>
<div class="newsletter_messages">
Loading....
</div>
</div>
JavaScript
$(document).ready(function(){
// Newsletter for Processing
var newsletter_form = $(".newsletter_signup_form");
var newsletter_firstname = $("#newsletter_firstname");
var newsletter_surname = $("#newsletter_surname");
var newsletter_email = $("#newsletter_email");
newsletter_form.submit(function(){
$.post("news_signup.php", $(".newsletter_signup_form").serialize(), function( response ) {
console.log(response);
var newletter_messages = $( response ).filter( ".messages" );
$( ".newsletter_messages" ).html( newletter_messages );
}).done( function() { console.log( "DONE" ); } );
return false;
});
});