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

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

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