Submit a Form with AJAX

Submit a Form with AJAX in WordPress
Notes:
Submits to page specified in jQuery AJAX call.
Does NOT refresh THIS page.

Call to Action





 

jQuery Code for Scripts N Styles Plug-In

jQuery(‘#dbAjaxForm’).on(‘submit’,function(e) {
e.preventDefault();
jQuery.post( ‘/ajax-post-target’, jQuery(‘#dbAjaxForm’).serialize(), function( data ) {
jQuery( ‘#dbThxMsg’ ).html( ‘Thanks for submitting. );
jQuery( ‘#dbAjaxForm’ ).hide();
});
});

HTML for this page

<div style=”border: 1px solid #000; padding:20px; font-size: 18px;”>
<p style=”font-size: 24px;”>Call to Action</p>
<form id=”dbAjaxForm”>
<input style=”border:1px solid #000; color:#000; width:100%; margin:5px 0;” type=”text” name=”db-ajax-first-name” value=”First Name *”>
<input style=”border:1px solid #000; color:#000; width:100%; margin:5px 0;” type=”text” name=”db-ajax-last-name” value=”Last Name *”>
<input style=”border:1px solid #000; color:#000; width:100%; margin:5px 0;” type=”text” name=”db-ajax-email” value=”Email *”>
<center>
<input style=”border:1px solid #000; color:#000;” type=”submit” value=”SUBMIT”>
</center>
</form>
<p id=”dbThxMsg” style=”color:#000″></p>
</div>