Javascript Wordpress前端表单赢得'；不要屈服

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

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

$（'declare#availability_form'）。提交（函数（事件）{
event.preventDefault（）；
$（“#声明可用性_feeback”）.hide（）；
var ajax_form_data=$（“#声明_可用性_form”）.serialize（）；
$.ajax({
url:example_ajax_obj.ajaxurl，
键入：“post”，
数据：ajax\u表单\u数据
}).完成（功能（数据）{
$（“#添加#fixture_feeback”）.html（“谢谢-您已经注册了可用性”）；
$（“#add#fixture_feeback”）.show（'slow'）；
setTimeout（函数（）{
$（“#添加#fixture_feeback”）.hide（'slow'）；
}, 5000);
}).fail（函数（）{
$（“#添加#fixture_feeback”）.html（“出现问题，请联系DoR”）；
$（“#add#fixture_feeback”）.show（'slow'）；
}).always（函数（）{
event.target.reset（）；
});
});

…这是链接到from functions.php的文件中的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();
}

试试这段代码

您的ajax脚本是错误的

我只是替换这段代码

$.ajax({
类型：“POST”，
url:example_ajax_obj.ajaxurl，
数据：{“操作”：“声明可用性”，“formData”：formData}，
成功：功能（响应）{
警惕（“无法添加您的投票”）；
警报（响应）；
}
})

更新代码

$（'declare#availability_form'）。提交（函数（事件）{
event.preventDefault（）；
$（“#声明可用性_feeback”）.hide（）；
var ajax_form_data=$（“#声明_可用性_form”）.serialize（）；
$.ajax({
类型：“POST”，
url:example_ajax_obj.ajaxurl，
数据：{“操作”：“声明可用性”，“formData”：formData}，
成功：功能（响应）{
警惕（“无法添加您的投票”）；
警报（响应）；
}
})
.done（函数（数据）{//来自PHP操作的响应
$（“#添加#fixture_feeback”）.html（“谢谢-您已经注册了可用性”）；
$（“#add#fixture_feeback”）.show（'slow'）；
setTimeout（函数（）{
$（“#添加#fixture_feeback”）.hide（'slow'）；
}, 5000);
})
.fail（函数（）{
$（“#添加#fixture_feeback”）.html（“出现问题，请联系DoR”）；
$（“#add#fixture_feeback”）.show（'slow'）；
})        
.always（函数（）{
event.target.reset（）；
});
});
添加代码很棒，但太多的代码很难看到任何问题，请阅读以下内容；您的JS代码没有包装在document ready中，因此很可能它根本找不到您试图将submit处理程序绑定到的元素…？感谢您回复我CBroe，但它包装在document ready中。我在该文件中有其他代码正在执行，断点确实在函数的第一行停止。一组放错地方的括号意味着我的代码没有包装在文档中。抱歉在这个基本错误上浪费了大家的时间。嗨，George，非常感谢您的响应，但是代码仍然没有达到ajax调用的程度。它到达$（'#declare_availability_form'）.submit（函数（事件）{行，无需进一步。只需将输入类型更改为
按钮，而不是submit，并将submit事件更改为JQueryTanks George中的on click事件，一组放错位置的括号表示我的代码未包装在文档中。对于在这一基本错误上浪费任何人的时间，我深表歉意。
<?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();
}

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