I have been trying to create an appointment form. Everything else is working but I am not able to submit the date. Here is my code:

My HTML for the date field:

<input type="date" name="aptdate" class="form-control rounded-pill mr-sm-2" id="aptdate" placeholder="Select a date" onfocus="(this.type='date')" onblur="(this.type='text')">

My JQuery:

jQuery(document).ready(function ($) {
    
    /* contact form submission */
    $('#aptForm').on('submit', function (e) {

        e.preventDefault();

        var form = $(this),
            name = form.find('#name').val(),
            email = form.find('#email').val(),
            service = form.find('#service').val(),
            aptDate = form.find('#aptdate').val(),
            comments = form.find('#comments').val(),
            ajaxurl = form.data('url');
        // console.log(name);
        // console.log(email);
        // console.log(service);
        // console.log(aptDate);


        if( name === '' || email == '' || service == '' || aptDate == '' ){
            console.log('Required inputs are empty');
            return;
        }

        $.ajax({
            
            url : ajaxurl,
            type : 'post',
            data : {
                
                name : name,
                email : email,
                service: service,
                aptDate: aptDate,
                comments: comments,
                action: 'save_user_apt_form'
                
            },
            error: function (response) {
                // console.log(aptDate);
                console.log(response);
            },
            success : function( response ){
                if( response == 0 ){
                    console.log('Unable to save your data, Please try again later');
                } else {
                    console.log('Appointment saved, thank you!');
                }
            }
            
        });

    });

});

AJAX Function

add_action( 'wp_ajax_nopriv_save_user_apt_form', 'save_appointment' );
add_action( 'wp_ajax_save_user_apt_form', 'save_appointment' );

function save_appointment(){

    $title      =   wp_strip_all_tags($_POST["name"]);
    $email      =   wp_strip_all_tags($_POST["email"]);
    $service    =   wp_strip_all_tags($_POST["service"]);
    $aptDate    =   wp_strip_all_tags($_POST["aptdate"]);
    $comments   =   wp_strip_all_tags($_POST["comments"]);

    $args = array(
        'post_title'    =>  $title,
        'post_content'  =>  $comments,
        'post_author'   =>  1,
        'post_status'   =>  'publish',
        'post_type'     =>  'my-appointment',
        'meta_input'    =>  array(
            '_contact_email_value_key'              =>  $email,
            '_contact_service_value_key'            =>  $service,
            '_contact_appointment-date_value_key'   =>  $aptDate
        )
    );

    $postID = wp_insert_post( $args );

    echo $postID;

    die();

}

Everything is being displayed in console but the date is not being submitted to database.

I can see the complete form data in Network tab:

name: somename
email: [email protected]
service: service 4
aptDate: 2020-07-23
message: some comment
action: save_user_apt_form 

I have been trying to create an appointment form. Everything else is working but I am not able to submit the date. Here is my code:

My HTML for the date field:

<input type="date" name="aptdate" class="form-control rounded-pill mr-sm-2" id="aptdate" placeholder="Select a date" onfocus="(this.type='date')" onblur="(this.type='text')">

My JQuery:

jQuery(document).ready(function ($) {
    
    /* contact form submission */
    $('#aptForm').on('submit', function (e) {

        e.preventDefault();

        var form = $(this),
            name = form.find('#name').val(),
            email = form.find('#email').val(),
            service = form.find('#service').val(),
            aptDate = form.find('#aptdate').val(),
            comments = form.find('#comments').val(),
            ajaxurl = form.data('url');
        // console.log(name);
        // console.log(email);
        // console.log(service);
        // console.log(aptDate);


        if( name === '' || email == '' || service == '' || aptDate == '' ){
            console.log('Required inputs are empty');
            return;
        }

        $.ajax({
            
            url : ajaxurl,
            type : 'post',
            data : {
                
                name : name,
                email : email,
                service: service,
                aptDate: aptDate,
                comments: comments,
                action: 'save_user_apt_form'
                
            },
            error: function (response) {
                // console.log(aptDate);
                console.log(response);
            },
            success : function( response ){
                if( response == 0 ){
                    console.log('Unable to save your data, Please try again later');
                } else {
                    console.log('Appointment saved, thank you!');
                }
            }
            
        });

    });

});

AJAX Function

add_action( 'wp_ajax_nopriv_save_user_apt_form', 'save_appointment' );
add_action( 'wp_ajax_save_user_apt_form', 'save_appointment' );

function save_appointment(){

    $title      =   wp_strip_all_tags($_POST["name"]);
    $email      =   wp_strip_all_tags($_POST["email"]);
    $service    =   wp_strip_all_tags($_POST["service"]);
    $aptDate    =   wp_strip_all_tags($_POST["aptdate"]);
    $comments   =   wp_strip_all_tags($_POST["comments"]);

    $args = array(
        'post_title'    =>  $title,
        'post_content'  =>  $comments,
        'post_author'   =>  1,
        'post_status'   =>  'publish',
        'post_type'     =>  'my-appointment',
        'meta_input'    =>  array(
            '_contact_email_value_key'              =>  $email,
            '_contact_service_value_key'            =>  $service,
            '_contact_appointment-date_value_key'   =>  $aptDate
        )
    );

    $postID = wp_insert_post( $args );

    echo $postID;

    die();

}

Everything is being displayed in console but the date is not being submitted to database.

I can see the complete form data in Network tab:

name: somename
email: [email protected]
service: service 4
aptDate: 2020-07-23
message: some comment
action: save_user_apt_form 

• custom-post-types
• ajax
• jquery
• forms

1 Answer 1

There is a typo:

Use below statement under save_appointment function

//indexes are case sensitive, note the capital 'D'
$aptDate    =   wp_strip_all_tags($_POST["aptDate"]); 

instead of

$aptDate    =   wp_strip_all_tags($_POST["aptdate"]);