WordPress自定义文章按钮弹出表单与AJAX提交指南

<?php
// 假设您正在一个自定义文章类型 'property' 的循环中
$args = array(
    'post_type'      => 'property',
    'posts_per_page' => -1, // 显示所有文章
    'post_status'    => 'publish'
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
        $post_id    = get_the_ID();
        $post_title = get_the_title();
?>
        <div class="property-item">
            <h2><?php echo esc_html( $post_title ); ?></h2>
            <p>文章ID: <?php echo esc_html( $post_id ); ?></p>
            <!-- 其他房产信息 -->

            <button class="btn btn-primary submit-offer-btn"
                    data-post-id="<?php echo esc_attr( $post_id ); ?>"
                    data-post-title="<?php echo esc_attr( $post_title ); ?>">
                提交报价
            </button>
        </div>
<?php
    endwhile;
    wp_reset_postdata(); // 重置查询
else :
    echo '<p>没有找到房产信息。</p>';
endif;
?>

<div id="offerFormDialog" style="display:none;">
    <h2 class="text-center">提交您的报价</h2>
    <form id="offerForm" method="POST" enctype="multipart/form-data">
        <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>

        <!-- 隐藏字段用于存储文章ID -->
        <input type="hidden" name="property_id" id="property_id_hidden_field" value="">

        <!-- 用于显示AJAX消息的区域 -->
        <div id="form_messages" style="margin-top: 15px;"></div>

        <div class="modal-footer">
            <input type="submit" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">
        </div>
    </form>
</div>