How to submit the date with ajax?

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: <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f682938582b6939b979f9ad895999b">[email protected]</a>
service: service 4
aptDate: 2020-07-23
message: some comment
action: save_user_apt_form

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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"]);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0