Submitting a form submission to WordPress database with ajax

Question

I am trying to get my contact form submissions to save in the WordPress database using ajax. However although the success message appears - it does not save in the database. It was saving to the database originally before I had to modify my script to make the validation work and only submit the form when all fields were correctly filled in.

I have included my code below.

Thanks for any help in advance.

Form

 <form name="message" id="message" class="contactusform" enctype="multipart/form-data" action="<?=admin_url()?>admin-post.php"> <?php if(isset($_SESSION["message"])) { echo $_SESSION["message"]; unset($_SESSION["message"]); } ?> <input type="hidden" name="action" value="add_foobar"> <input type="hidden" name="data" value="foobarid"> <label>Full Name:</label> <input type="text" name="name" value="" required=""> <label>Phone Number:</label> <input type="text" name="telno" id="telno"> <label>Email Address:</label> <input type="email" name="email" value="" required=""> <label>Town:</label> <input type="text" name="town" value="" required=""> <label>Device:</label> <select name="device" value="" required=""> <option selected="selected" value=""></option> <option value="Not Sure">Not Sure</option> <option selected="selected" value=""></option> <option value="iPhone 3G">iPhone 3G</option> <option value="iPhone 3GS">iPhone 3GS</option> <option value="iPhone 4G">iPhone 4G</option> <option value="iPhone 4S">iPhone 4S</option> <option value="iPhone 5">iPhone 5</option> <option value="iPhone 5C">iPhone 5C</option> <option value="iPhone 5S">iPhone 5S</option> <option value="iPhone 6">iPhone 6</option> <option value="iPhone 6 Plus">iPhone 6 Plus</option> <option selected="selected" value=""></option> <option value="MacBook">MacBook</option> <option value="MacBook Pro">MacBook Pro</option> <option value="MacBook Air">MacBook Air</option> <option selected="selected" value=""></option> <option value="iMac">iMac</option> <option selected="selected" value=""></option> <option value="iPad 1">iPad 1</option> <option value="iPad 2">iPad 2</option> <option value="iPad 3">iPad 3</option> <option value="iPad 4">iPad 4</option> <option value="iPad Air">iPad Air</option> <option value="iPad Air 2">iPad Air 2</option> <option value="iPad Mini 1">iPad Mini 1</option> <option value="iPad Mini 2">iPad Mini 2</option> <option value="iPad Mini 3">iPad Mini 3</option> <option selected="selected" value=""></option> <option value="iPod Classic">iPod Classic</option> <option value="iPod Mini">iPod Mini</option> <option value="iPod Nano">iPod Nano</option> <option value="iPod Shuffle">iPod Shuffle</option> <option value="iPod Touch">iPod Touch</option> </select> <label>Message:</label> <textarea name="message" cols="30" rows="4" value="" required=""></textarea> <input class="submit2" type='submit' id='submit' value='Send Message' /> </form> <div id='simple-msg'></div> 

Script

 <script type="text/javascript"> $(document).ready(function () { $('.contactusform').validate({ rules: { name: { required: true }, telno: { required: true, number: true }, email: { required: true, email: true }, town: { required: true }, device: { required: true }, message: { required: true }, }, messages: { name: { required: "Please enter your full name." }, telno: { required: "Please enter your phone number." }, email: { required: "Please enter your email address." }, town: { required: "Please enter your town." }, device: { required: "Please select your device." }, message: { required: "Please enter your message." }, }, submitHandler: function (form) { $("#simple-msg").html("Sending..."); var postData = $(this).serializeArray(); var formURL = $(this).attr("action"); $.ajax({ type: "POST", url: formURL, data: postData, success:function(data, textStatus, jqXHR) { $("#simple-msg").html('<p>Thanks for your request - we will be in touch soon!</p>'); }, error: function(jqXHR, textStatus, errorThrown) { $("#simple-msg").html('<p>Message failed to send. Please try again!</p>'); } }); } }); }); </script> 

Answer 1

In the lines,

var postData = $(this).serializeArray();
var formURL = $(this).attr("action");

this should be replaced with form .

This ought to solve the problem.