Ajax Not Submitting WordPress Form

Question

So, not quite sure what I'm doing wrong. My form submits to my database fine without my Ajax, but with my Ajax it doesn't. Also, if you do a console.log of the dataString variable, it has values filled. So, it will successfully submit and the success function will trigger, but the data never goes to my php function for some reason, as my database is empty. Also, there are no errors in the console, and the ajax_url variable is working fine.

var dataString = 'reservationName='+ resName.val() + '&reservationEmail=' + resEmail.val() + '&reservationPhone=' + resPhone.val() + '&reservationTime=' + resTime.val() + '&reservationRequests=' + resReqests.val();

            console.log(dataString);

            $.ajax({
                type: 'POST',
                url: ajax_url,
                data: {
                    'action': 'submit_reservation',
                    from: dataString
                },
                cache: false,
                success: function () {

                    $('form.reservation-form').addClass('submitted');

                    setTimeout(function () {
                        $('form.reservation-form').addClass('hide');
                    }, 400);

                    $('.thanks-message').addClass('appear');

                    resName.val('');
                    resName.removeClass('invalid');
                    resEmail.val('');
                    resEmail.removeClass('invalid');
                    resPhone.val('');
                    resPhone.removeClass('invalid');
                    resTime.val('');
                    resTime.removeClass('invalid');
                    resAS.val('');
                    resAS.removeClass('invalid');

                },
                error: function () {

                    $('form.reservation-form').addClass('submitted');

                    setTimeout(function () {
                        $('form.reservation-form').addClass('hide');
                    }, 400);

                    $('.error-message').addClass('appear');

                    resName.val('');
                    resName.removeClass('invalid');
                    resEmail.val('');
                    resEmail.removeClass('invalid');
                    resPhone.val('');
                    resPhone.removeClass('invalid');
                    resTime.val('');
                    resTime.removeClass('invalid');
                    resAS.val('');
                    resAS.removeClass('invalid');

                }
            });




 <?php

function submit_reservation() {

global $wpdb;

$name = $_POST['reservationName'];
$email = $_POST['reservationEmail'];
$phone = $_POST['reservationPhone'];
$time = $_POST['reservationTime'];
$requests = $_POST['reservationRequests'];
$filter = $_POST['reservationFilter'];
$antiSpam = $_POST['reservationAntiSpam'];

if ($antiSpam === '8') {

    $table = $wpdb->prefix . 'reservations';

    $data = array(
        'name' => $name,
        'phone' => $phone,
        'email' => $email,
        'time' => $time,
        'requests' => $requests
    );

    $format = array(
        '%s',
        '%s',
        '%s',
        '%s',
        '%s'
    );

    $wpdb->insert($table, $data, $format);

}

}

add_action('init', 'submit_reservation');
add_action('wp_ajax_submit_reservation', 'submit_reservation');
add_action('wp_ajax_nopriv_submit_reservation', 'submit_reservation');


?>

Answer 1

The data portion of your ajax should have a set of key value pairs with keys that match the keys of the $_POST.

data: {
        "action"              : "submit_reservation"
        ,"reservationName"    : "a string or variable here"
        ,"reservationEmail"   : aVariable
        ,"reservationPhone"   : anotherVariable
        ,"reservationTime"    : "a string or variable here"
        ,"reservationRequests": "a string or variable here"
        ,"reservationFilter"  : "a string or variable here"
        ,"reservationAntiSpam": "a string or variable here"
      },