Wordpress front end form won't submit

Question

I have a form on a Wordpress front-end page:

<form name="declare_availability_form" id="declare_availability_form" action="#" method="post">
    <?php wp_nonce_field( 'declare_availability' ); ?>
    <input type="hidden" name="declare_availability_playerid" id="declare_availability_playerid" value="<?php echo $id ?>">
    <input type="hidden" name="declare_availability_date" id="declare_availability_date" value="<?php echo $date ?>">
    <input type="hidden" name="declare_availability_avail" id="declare_availability_avail" value="<?php echo $avail ?>">
    <input type="hidden" name="action" value="declare_availability">
    <textarea id="declare_availability_message" name="declare_availability_message"></textarea>
    <input type="submit" name="declare_availability_sub">
</form>
<div id="declare_availability_feeback"></div>

This is how I register my script in functions.php :

<?php
wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_localize_script( 'html5blankscripts', 'example_ajax_obj', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'html5blankscripts' ); // Enqueue it!

This is my javascript:

$('#declare_availability_form').submit(function(event) {
    event.preventDefault();

    $(" #declare_availability_feeback ").hide();
    var ajax_form_data = $("#declare_availability_form").serialize();
    $.ajax({
        url: example_ajax_obj.ajaxurl, 
        type: 'post',
        data: ajax_form_data
    }).done( function( data ) {
        $(" #add_fixture_feeback ").html( "<h2>Thank you - you have registered your availability</h2>");
        $(" #add_fixture_feeback ").show('slow');
        setTimeout(function() {
            $(" #add_fixture_feeback ").hide('slow');
        }, 5000);
    }).fail( function() {
        $(" #add_fixture_feeback ").html( "<h2>Something went wrong, please contact the DoR.</h2>" );
        $(" #add_fixture_feeback ").show('slow');
    }).always( function() {
        event.target.reset();
    });
});

...and this is my php function in a file linked to from functions.php:

<?php

add_action( 'wp_ajax_declare_availability', 'declare_availability' );
add_action( 'wp_ajax_nopriv_declare_availability', 'declare_availability' );

function declare_availability () {
    if( isset( $_POST['_wpnonce'] ) && wp_verify_nonce( $_POST['_wpnonce'], 'declare_availability') ) {

        if ( isset( $_REQUEST ) ) {
            $date = sanitize_text_field( $_REQUEST['declare_availability_date']);
            $id = intval( sanitize_text_field( $_REQUEST['declare_availability_playerid']));
            $avail = sanitize_text_field( $_REQUEST['declare_availability_avail']);
            $message = sanitize_text_field( $_REQUEST['declare_availability_message']);

            global $wpdb;

            $wpdb->insert('tbl_selections', array(
                'selections_player_id'      => $id,
                'selections_team'           => '',
                'selections_position'       => '',
                'selections_date'           => $date,
                'selections_confirmed'      => $avail,
                'selections_drop_goals'     => 0,
                'selections_penalties'      => 0,
                'selections_tries'          => 0,
                'selections_conversions'    => 0,
                'selections_comments'       => $message,
                'selections_rating'         => '',
                'selections_yellow_card'    => '',
                'selections_red_card'       => ''
            ));
        }
    }
    else {
        wp_die( '<pre>Invalid nonce specified</pre>' );
    }
    die();
}

I have a breakpoint set on the form submit action in the javascript and a second breakpoint on the event.preventDefault(); line. When I click on the submit button to submit the form, it stops on the first breakpoint. When I press play again, it doesn't get to the 2nd breakpoint. I've done as many searches as I can to try to find the solution but have had no luck. Can anyone spot my error? Thanks in advance.

Answer 1

Try this code.

You ajax script is wrong.

I just replace this piece of code.

$.ajax({ type : "POST", url : example_ajax_obj.ajaxurl, data : {"action": "declare_availability","formData":formData}, success: function(response) { alert("Your vote could not be added"); alert(response); } })

Updated code

$('#declare_availability_form').submit(function(event) {
    event.preventDefault();       
    $(" #declare_availability_feeback ").hide();
    var ajax_form_data = $("#declare_availability_form").serialize();

    $.ajax({
                 type : "POST",
                 url : example_ajax_obj.ajaxurl,
                 data : {"action": "declare_availability","formData":formData},
                 success: function(response) {

                       alert("Your vote could not be added");
                       alert(response);
                    }
            })
    .done( function( data ) { // response from the PHP action
        $(" #add_fixture_feeback ").html( "<h2>Thank you - you have registered your availability</h2>");
        $(" #add_fixture_feeback ").show('slow');
        setTimeout(function() {
            $(" #add_fixture_feeback ").hide('slow');
        }, 5000);
    })
    .fail( function() {
        $(" #add_fixture_feeback ").html( "<h2>Something went wrong, please contact the DoR.</h2>" );                  
        $(" #add_fixture_feeback ").show('slow');
    })        
    .always( function() {
        event.target.reset();
    });
});