值得一看
双11 12
广告
广告

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

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

本教程详细介绍了如何在WordPress中为每个自定义文章类型(如“房产”)的列表项添加一个“提交报价”按钮,点击后弹出包含特定文章ID的自定义HTML表单。文章将涵盖如何使用jQuery UI Dialog创建模态弹窗,通过数据属性动态传递文章ID,并利用WordPress AJAX机制实现表单的异步提交,同时处理文件上传和展示提交结果,从而提供一个无缝的用户体验。

1. 概述与核心需求

在wordpress开发中,我们经常需要在文章列表页为每个条目提供特定的交互功能。本教程旨在解决以下核心需求:

  • 在自定义文章类型(例如property)的循环列表中,为每个文章添加一个“提交报价”按钮。
  • 点击按钮后,弹出一个模态表单。
  • 该表单应包含当前文章的ID作为隐藏字段,以便在提交时关联到特定的文章。
  • 表单提交过程应通过AJAX异步完成,避免页面刷新,并在弹窗内显示成功或失败消息。
  • 表单支持文件上传功能。

我们将利用WordPress的内置功能、jQuery UI Dialog库以及AJAX技术来实现这一目标。

2. HTML结构:按钮与表单

首先,我们需要在WordPress文章循环中设置按钮,并在页面上放置一个用于弹窗的表单结构。

2.1 文章循环中的按钮

在您的自定义文章类型模板文件(如archive-property.php或通过WP_Query构建的页面)中,遍历文章时为每个文章添加按钮,并通过HTML5的data-*属性存储文章ID和标题。

<?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;
?>

说明:

  • submit-offer-btn 类用于JavaScript选择器。
  • data-post-id 和 data-post-title 属性用于存储当前文章的ID和标题,JavaScript将通过这些属性获取数据。

2.2 弹出表单的HTML结构

将您的完整表单放置在一个隐藏的 div 容器中,该容器应该在页面上只出现一次,而不是在循环内部。这个 div 将被jQuery UI Dialog转换为弹窗。

<div id="offerFormDialog">
<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"></div>
<div class="modal-footer">
<input type="submit" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">
</div>
</form>
</div>

说明:

  • id=”offerFormDialog” 是弹窗容器的唯一标识符。
  • style=”display:none;” 确保弹窗在页面加载时是隐藏的。
  • id=”property_id_hidden_field” 是一个隐藏字段,其value将在弹窗打开时由JavaScript动态填充。
  • id=”form_messages” 用于显示AJAX提交后的成功或错误消息。

3. JavaScript/jQuery:弹窗控制与AJAX提交

我们将使用jQuery UI Dialog来创建弹

温馨提示: 本文最后更新于2025-08-09 22:27:36,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞10赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容