在WordPress中为每个自定义文章的按钮实现弹出表单并进行AJAX提交

<?php
// 假设您正在一个WordPress循环中显示'property'类型的文章
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
?>
    <div class="property-item">
        <h2><?php the_title(); ?></h2>
        <p><?php the_excerpt(); ?></p>
        <!-- 其他房产详情 -->

        <!-- 触发弹出表单的按钮，通过data-post-id传递当前文章ID -->
        <button class="btn btn-primary open-offer-form" data-post-id="<?php the_ID(); ?>">
            Submit Offer
        </button>
    </div>
<?php
    endwhile;
    wp_reset_postdata(); // 重置查询
endif;
?>

<!-- 模态框容器，初始隐藏 -->
<div id="offerFormModal" style="display:none;">
    <h2 class="text center">Submit Your Offer</h2>
    <form id="offerSubmissionForm" action="" method="POST" enctype="multipart/form-data">
        <!-- 隐藏字段，用于存储文章ID，JavaScript会动态设置其值 -->
        <input type="hidden" name="post_id" id="modal_post_id">

        <!-- 表单字段 -->
        <div class="form-group row">
            <label class="col-md-12"  for="name">Name<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">Email<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">Price<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">Purchase Type<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>
                <!-- ... 其他选项 ... -->
            </select>
        </div>
        <div class="form-group row">
            <label for="closing_date" class="col-md-12">Closing Date<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" class="col-md-12">Concessions Amount</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">Inspection Period<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_charge" class="col-md-12">Seller Occupancy & Charge</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">EMD<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">Home Warranty<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">Attachment</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>
    <!-- 用于显示AJAX提交结果的消息区域 -->
    <div id="formMessage" style="margin-top: 15px;"></div>
</div>

<?php
function enqueue_offer_form_assets() {
    // 引入 jQuery UI Dialog 脚本和样式
    wp_enqueue_script('jquery-ui-dialog');
    wp_enqueue_style('wp-jquery-ui-dialog'); // WordPress自带的jQuery UI主题样式，您也可以使用自定义样式

    // 引入您的自定义脚本
    // 建议将以下JavaScript代码保存到您的主题目录下的 /js/property-offer.js 文件中
    wp_enqueue_script(
        'property-offer-script',
        get_template_directory_uri() . '/js/property-offer.js',
        array('jquery', 'jquery-ui-dialog'), // 依赖jQuery和jQuery UI Dialog
        null, // 版本号
        true // 在页脚加载
    );

    // 将WordPress AJAX URL和Nonce传递给JavaScript
    wp_localize_script(
        'property-offer-script',
        'propertyOfferAjax',
        array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('property_offer_nonce') // 创建一个安全Nonce
        )
    );
}
add_action('wp_enqueue_scripts', 'enqueue_offer_form_assets');
?>

jQuery(document).ready(function($) {
    // 1. 初始化 jQuery UI Dialog
    $("#offerFormModal").dialog({
        modal: true,         // 模态对话框，背景不可点击
        autoOpen: false,     // 默认不自动打开
        width: 600,          // 对话框宽度
        title: "Submit Offer", // 对话框标题
        resizable: false,    // 不可调整大小
        close: function() {
            // 对话框关闭时，重置表单并清空消息
            $('#offerSubmissionForm')[0].reset();
            $('#formMessage').empty();
        }
    });

    // 2. 处理按钮点击事件
    $('.open-offer-form').on('click', function() {
        var postId = $(this).data('post-id'); // 获取按钮上的data-post-id属性值
        $('#modal_post_id').val(postId); // 将文章ID设置到隐藏的表单字段中
        $("#offerFormModal").dialog("open"); // 打开模态对话框
    });

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

        // 创建 FormData 对象，用于处理文件上传和表单数据
        var formData = new FormData(this);
        formData.append('action', 'submit_property_offer'); // WordPress AJAX action
        formData.append('nonce', propertyOfferAjax.nonce); // 添加安全Nonce

        // 显示提交中的消息
        $('#formMessage').html('<p style="color: blue;">Submitting your offer, please wait...</p>');

        $.ajax({
            url: propertyOfferAjax.ajax_url, // WordPress AJAX 处理URL
            type: 'POST',
            data: formData,
            processData: false, // 告诉jQuery不要处理数据
            contentType: false, // 告诉jQuery不要设置Content-Type头
            success: function(response) {
                if (response.success) {
                    $('#formMessage').html('<p style="color: green;">' + response.data + '</p>');
                    $('#offerSubmissionForm')[0].reset(); // 提交成功后清空表单
                    // 可选：延迟一段时间后关闭模态框
                    // setTimeout(function() { $("#offerFormModal").dialog("close"); }, 3000);
                } else {
                    $('#formMessage').html('<p style="color: red;">' + response.data + '</p>');
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#formMessage').html('<p style="color: red;">An error occurred: ' + textStatus + '</p>');
                console.error("AJAX Error:", textStatus, errorThrown, jqXHR);
            }
        });
    });
});

<?php
/**
 * 处理房产报价表单的AJAX提交
 */
function handle_property_offer_submission() {
    // 1. 安全检查：验证Nonce
    if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( $_POST['nonce'], 'property_offer_nonce' ) ) {
        wp_send_json_error( 'Security check failed. Nonce verification failed.' );
    }

    // 2. 数据清理与验证
    $