WordPress前端表單不會提交

Question

我在Wordpress前端頁面上有一個表單：

<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>

這就是我在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!

這是我的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();
    });
});

...這是我的php函數，位於從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();
}

我在javascript的表單提交操作上設置了一個斷點，並在event.preventDefault（）;上設置了第二個斷點。 線。 當我單擊提交按鈕提交表單時，它在第一個斷點處停止。 當我再次按播放時，它不會到達第二個斷點。 我已進行了盡可能多的搜索以嘗試找到解決方案，但沒有運氣。 誰能發現我的錯誤？ 提前致謝。

Answer 1

試試這個代碼。

您的ajax腳本錯誤。

我只是替換這段代碼。

$.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); } })

更新的代碼

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