Submitting a form submission to WordPress database with ajax

3 Views

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.

Read More

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>
Post Views: 3

Related posts

1 comment

  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.

Comments are closed.