WordPress property文章按钮弹出带Post ID表单及AJAX提交求助

步骤1：调整文章循环与按钮结构 #

你原来的代码只能拿到第一篇文章的ID，需要把ID绑定逻辑放到循环内部，按钮修改为：

<button class="btn btn-primary submit-offer-btn" data-post-id="<?php echo esc_attr($post->ID); ?>">Submit Offer</button>

正确的循环结构参考：

$the_query = new WP_Query( array(
    'post_type' => 'property',
    'posts_per_page' => -1 // 可按需调整展示数量
) );
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        // 输出文章内容
        // 插入上面的提交按钮
    }
    wp_reset_postdata();
}

步骤2：添加弹窗容器 #

在页面底部（循环外）添加弹窗HTML，这里用通用的Bootstrap模态框结构，你用其他弹窗组件可对应调整：

<div class="modal fade" id="offerModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body" id="offerModalContent">
        <!-- 表单和提交提示都会放在这里 -->
      </div>
    </div>
  </div>
</div>

步骤3：修改表单添加隐藏ID字段 #

把你的表单代码里新增Post ID隐藏字段，完整结构如下：

<h2 class="text center">Submit Your Offer</h2>
<form id="offerForm" action="" method="POST" enctype="multipart/form-data">
    <!-- 新增隐藏字段存储对应文章ID -->
    <input type="hidden" name="property_id" id="property_id" value="">
    <!-- 以下是你原来的表单内容原样保留 -->
    <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="text" 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="closing_date"><?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="closing_date" 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="closing_date" 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="price" 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="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="price" 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="submitSuccess" style="display: none;">
    <h3>提交成功</h3>
    <p>我们已收到您的报价，将尽快与您联系</p>
    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>

步骤4：添加JS实现弹窗与AJAX提交 #

把以下JS代码加入页面，依赖WordPress自带的jQuery：

jQuery(document).ready(function($){
    // 点击按钮打开弹窗，赋值对应文章ID
    $('.submit-offer-btn').click(function(){
        let postId = $(this).data('post-id');
        $('#offerModal').modal('show');
        $('#property_id').val(postId);
        // 重置表单状态
        $('#offerForm').show();
        $('#submitSuccess').hide();
        $('#offerForm')[0].reset();
    });

    // 表单AJAX提交
    $('#offerForm').submit(function(e){
        e.preventDefault();
        let formData = new FormData(this);
        formData.append('action', 'submit_property_offer'); // WordPress AJAX必填参数

        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(res){
                if(res.success){
                    $('#offerForm').hide();
                    $('#submitSuccess').show();
                }else{
                    alert('提交失败，请检查必填项后重试');
                }
            },
            error: function(){
                alert('网络异常，请稍后再试');
            }
        });
    });
});

步骤5：添加PHP后端处理逻辑 #

把以下代码加入主题的functions.php文件，处理提交请求：

// 处理登录用户提交
add_action('wp_ajax_submit_property_offer', 'handle_offer_submit');
// 处理未登录用户提交
add_action('wp_ajax_nopriv_submit_property_offer', 'handle_offer_submit');
function handle_offer_submit(){
    // 校验必填字段
    if(empty($_POST['property_id']) || empty($_POST['name']) || empty($_POST['email'])){
        wp_send_json_error('必填字段不能为空');
    }
    $property_id = intval($_POST['property_id']);
    
    // 这里可以自定义业务逻辑，比如存到数据库、生成报价记录、发送通知邮件等
    // 示例：发送邮件通知管理员
    $to = get_option('admin_email');
    $subject = '收到新的房产报价：' . get_the_title($property_id);
    $message = "房产ID：{$property_id}\n";
    $message .= "联系人：{$_POST['name']}\n";
    $message .= "联系邮箱：{$_POST['email']}\n";
    $message .= "报价金额：{$_POST['price']}\n";
    // 其他字段可自行拼接进邮件内容
    $headers = array("From: {$_POST['name']} <{$_POST['email']}>");
    
    // 处理附件
    $attachments = array();
    if(!empty($_FILES['attachment']['tmp_name'])){
        require_once ABSPATH . 'wp-admin/includes/file.php';
        require_once ABSPATH . 'wp-admin/includes/media.php';
        require_once ABSPATH . 'wp-admin/includes/image.php';
        $attach_id = media_handle_upload('attachment', 0);
        if(!is_wp_error($attach_id)){
            $attachments[] = get_attached_file($attach_id);
        }
    }
    wp_mail($to, $subject, $message, $headers, $attachments);

    wp_send_json_success('提交成功');
}

内容的提问来源于stack exchange，提问作者qazidev