WordPress 自定义文章类型按钮弹出表单与 AJAX 提交教程

本教程详细指导如何在 WordPress 中为自定义文章类型列表的每个文章添加一个“提交报价”按钮，点击后弹出包含文章ID的自定义HTML表单，并实现表单数据的AJAX提交及成功消息显示。内容涵盖前端jQuery UI弹窗设置、动态数据传递、AJAX请求处理，以及后端WordPress AJAX钩子和数据处理的PHP实现，确保功能完整、安全且用户体验良好。

1. 准备工作：WordPress 环境与必要资源加载

为了实现弹出表单和AJAX提交，我们需要确保WordPress环境正确加载了jQuery UI库（用于弹窗）以及我们自定义的JavaScript和CSS文件。

1.1 在主题的 functions.php 文件中注册和加载脚本与样式：

<?php /**
 * 注册和加载自定义弹出表单所需的脚本和样式
 */
function enqueue_offer_popup_assets() {
    // 加载 jQuery UI Dialog 的基础主题样式
    wp_enqueue_style( 'jquery-ui-css', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );

    // WordPress 默认包含 jQuery 和 jQuery UI Core，我们只需加载 Dialog 组件
    wp_enqueue_script( 'jquery-ui-dialog' );

    // 加载我们自定义的 JavaScript 文件
    // 假设您的JS文件位于主题根目录下的 /js/offer-popup.js
    wp_enqueue_script( 'offer-popup-script', get_template_directory_uri() . '/js/offer-popup.js', array('jquery', 'jquery-ui-dialog'), null, true );

    // 将 AJAX URL 和 Nonce 数据传递给 JavaScript
    // Nonce 用于安全验证，防止跨站请求伪造 (CSRF)
    wp_localize_script( 'offer-popup-script', 'ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ), // WordPress AJAX 处理入口
        'nonce'    => wp_create_nonce( 'submit_offer_nonce' ), // 生成一个安全的 Nonce
    ));
}
add_action( 'wp_enqueue_scripts', 'enqueue_offer_popup_assets' );

// 注意：请在主题根目录下创建一个名为 'js' 的文件夹，并在其中创建 'offer-popup.js' 文件。

2. 前端实现：按钮、表单结构与jQuery UI弹窗

在您的自定义文章类型（例如 'property'）的循环中，为每个文章添加一个按钮，并准备好用于弹窗的HTML表单结构。

2.1 在文章循环中添加按钮：

在显示自定义文章类型的模板文件（例如 archive-property.php 或 single-property.php，取决于您的布局）中，找到您希望添加按钮的位置。确保按钮能够传递当前文章的ID。

<?php // 假设您在 WordPress 循环中
// 例如：while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="property-item">
    <h2><?php the_title(); ?></h2>
    <!-- 其他文章内容 -->

    <!-- 提交报价按钮，通过 data-post-id 属性传递当前文章的 ID -->
    <button class="btn btn-primary submit-offer-btn" data-post-id="<?php echo get_the_ID(); ?>">
        Submit Offer
    </button>
</div>
<?php // endwhile;
// wp_reset_postdata();
?>

2.2 准备弹出表单的HTML结构：

将您的完整HTML表单放置在一个隐藏的 div 容器中。这个 div 将被 jQuery UI 转换为弹窗。请确保表单中包含一个隐藏字段用于存储文章ID，以及一个用于显示提交消息的区域。

<!-- 弹出表单容器，初始状态隐藏 -->
<div id="offerFormDialog" style="display: none;">
    <h2 class="text center">Submit Your Offer</h2>
    <form id="propertyOfferForm" action="" method="POST" enctype="multipart/form-data">
        <!-- 隐藏字段，用于存储文章ID -->
        <input type="hidden" name="post_id" id="dialog_post_id">

        <div class="form-group row">
            <label class="col-md-12" for="name"><?php esc_html_e( 'Name', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" id="name" name="name" type="text" required>
        </div>
        <div class="form-group row">
            <label for="email" class="col-md-12"><?php esc_html_e( 'Email', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="email" type="email" required>
        </div>
        <div class="form-group row">
            <label for="price" class="col-md-12"><?php esc_html_e( 'Price', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="price" type="number" required>
        </div>
        <div class="form-group row">
            <label for="purchase_type" class="col-md-12"><?php esc_html_e( 'Purchase Type', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <select class="col-md-12" name="purchase_type" required>
                <option disabled selected value> -- select an option -- </option>
                <option value="Cash">Cash</option>
                <option value="Conventional Loan">Conventional Loan</option>
                <option value="FHA Loan">FHA Loan</option>
                <option value="MSHDA Conventional Loan">MSHDA Conventional Loan</option>
                <option value="MSHDA FHA Loan">MSHDA FHA Loan</option>
                <option value="Land Contract">Land Contract</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="closing_date"><?php esc_html_e( 'Closing Date', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-12 date_box" name="closing_date" type="date" required>
        </div>
        <div class="form-group row">
            <label for="concessions_amount"><?php esc_html_e( 'Concessions Amount', 'ivproperty' ); ?></label>
            <input class="col-md-12" name="concessions_amount" type="number">
        </div>
        <div class="form-group row">
            <label for="inspection_period" class="col-md-12"><?php esc_html_e( 'Inspection Period', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-6 date_box" name="insp_from" type="date" required>
            <input class="col-md-6 date_box" name="insp_to" type="date" required>
        </div>
        <div class="form-group row">
            <label for="seller_occupancy" class="col-md-12"><?php esc_html_e( 'Seller Occupancy & Charge', 'ivproperty' ); ?></label>
            <input class="col-md-6" name="seller_occupancy" type="text" placeholder="Occupancy">
            <input class="col-md-6" name="seller_charge" type="number" placeholder="Charge">
        </div>
        <div class="form-group row">
            <label for="emd" class="col-md-12"><?php esc_html_e( 'EMD', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <input class="col-md-12" name="emd" type="number" placeholder="Earnest Money Deposit" required>
        </div>
        <div class="form-group row">
            <label for="home_warranty" class="col-md-12"><?php esc_html_e( 'Home Warranty', 'ivproperty' ); ?><span class="red-star">*</span></label>
            <select class="col-md-12" name="home_warranty" required>
                <option disabled selected value> -- select an option -- </option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>
        </div>
        <div class="form-group row">
            <label for="attachment" class="col-md-12"><?php esc_html_e( 'Attachment', 'ivproperty' ); ?></label>
            <input type="file" name="attachment">
        </div>

        <div class="modal-footer">
            <input type="submit" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">
        </div>
    </form>
    <!-- 用于显示成功/错误消息的区域 -->
    <div id="form_message" style="margin-top: 15px; text-align: center;"></div>
</div>

3. JavaScript 实现：弹窗逻辑与 AJAX 提交

在 js/offer-popup.js 文件中编写 JavaScript 代码，用于初始化 jQuery UI 弹窗、处理按钮点击事件、动态设置文章ID，以及通过 AJAX 提交表单。

jQuery(document).ready(function($) {
    // 1. 初始化 jQuery UI Dialog
    $("#offerFormDialog").dialog({
        autoOpen: false, // 默认不自动打开
        modal: true,     // 启用模态框（背景变暗，阻止与页面其他元素交互）
        width: 600,      // 弹窗宽度，可根据需要调整
        height: 'auto',  // 弹窗高度自适应内容
        title: "提交您的报价", // 弹窗标题
        resizable: false, // 禁止调整大小
        draggable: true, // 允许拖动
        closeOnEscape: true, // 按 ESC 键关闭
        buttons: { // 可以在这里定义弹窗按钮，但我们使用表单自带的提交按钮
            "关闭": function() {
                $(this).dialog("close");
            }
        },
        open: function(event, ui) {
            // 弹窗打开时，清空表单和消息区域
            $('#propertyOfferForm')[0].reset(); // 重置表单
            $('#form_message').empty().removeClass('success error'); // 清空消息
            // 如果表单有文件上传字段，重置可能需要更复杂的方式，例如重新创建input
        }
    });

    // 2. 监听“提交报价”按钮点击事件
    $('.submit-offer-btn').on('click', function() {
        var postId = $(this).data('post-id'); // 获取按钮上的 data-post-id 属性值
        $('#dialog_post_id').val(postId); // 将文章ID设置到隐藏的表单字段中
        $("#offerFormDialog").dialog("open"); // 打开弹窗
    });

    // 3. 处理表单提交（使用 AJAX）
    $('#propertyOfferForm').on('submit', function(e) {
        e.preventDefault(); // 阻止表单默认的提交行为

        var $form = $(this);
        var formData = new FormData(this); // 使用 FormData 对象处理表单数据，包括文件上传

        // 添加 WordPress AJAX action 和 Nonce 到 FormData
        formData.append('action', 'submit_property_offer'); // 这是后端 PHP 中定义的 AJAX action
        formData.append('_wpnonce', ajax_object.nonce); // 从 wp_localize_script 获取 Nonce

        // 显示提交中的消息
        $('#form_message').empty().removeClass('success error').text('正在提交中，请稍候...');

        $.ajax({
            url: ajax_object.ajax_url, // WordPress AJAX URL
            type: 'POST',
            data: formData,
            processData: false, // 告诉 jQuery 不要处理数据
            contentType: false, // 告诉 jQuery 不要设置 Content-Type 头
            success: function(response) {
                if (response.success) {
                    $('#form_message').text(response.data).addClass('success');
                    // 成功后可以清空表单，或者关闭弹窗
                    // $form[0].reset(); // 清空表单
                    // setTimeout(function() { $("#offerFormDialog").dialog("close"); }, 3000); // 3秒后关闭
                } else {
                    $('#form_message').text(response.data).addClass('error');
                }
            },
            error: function(xhr, status, error) {
                $('#form_message').text('提交失败：'   error).addClass('error');
                console.error('AJAX Error:', status, error, xhr);
            }
        });
    });
});

样式提示： 您可能需要为 #form_message 添加一些CSS样式，使其在成功和错误时有不同的视觉反馈。

/* 在您的主题 style.css 中添加 */
#form_message.success {
    color: green;
    font-weight: bold;
}

以上是WordPress 自定义文章类型按钮弹出表单与 AJAX 提交教程的详细内容。更多信息请关注PHP中文网其他相关文章！