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.

Adding code is great, but too much is just difficult to see any issues, please read the following; minimal reproducible example — Can O' Spam
Your JS code is not wrapped in document ready, so most likely it simply doesn’t find the element you are trying to bind the submit handler to in the first place …? — CBroe
Thanks for getting back to me CBroe, but it is wrapped in document ready. I have other code in that file being executed and the breakpoint does stop on the first line of the function. — Tim Tunnicliff
Apologies @CBroe, you were correct. A misplaced set of brackets meant that my code wasn't wrapped in document ready. Apologies for wasting anyone's time on this basic error. — Tim Tunnicliff

Vel Vel · Accepted Answer · 2018-07-03T10:41:53

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();
    });
});

Wordpress front end form won't submit

1 Answers