文章目录
分享文章
需求背景:在使用Wordpress制作网站时,使用了 YITH WooCommerce Wishlist 插件,并且我给我 header 增加了查看心愿单按钮,效果图如下:
我单独为心愿单制作了一个页面,方便客户进行查看,并在心愿单下面增加了一个表单(使用Contact form7),客户提交时方便查看客户关系哪些产品
问题出现在Contact form7 我只能获取当前页面URL,及我制作的页面
https://sensor1stop.com/wishlist/
而我需要的页面如下:
https://sensor1stop.com/wishlist/view/6YVZOATTHUKA/
通过查看源码,发现html源码中包含这个链接:
<form
id="yith-wcwl-form"
action="https://sensor1stop.com/wishlist/view/6YVZOATTHUKA/"
method="post"
class="woocommerce yith-wcwl-form wishlist-fragment"
data-fragment-options="{...}"
>
因此尝试使用js获取该链接,然后赋值给Contact form7,提交给后台,具体实现方法如下:
1.将隐藏的输入字段添加到您的 Contact Form 7 表单以存储心愿单链接:
<input type="hidden" name="wishlist_link" value="">
2.在页面底部添加获取链接 JS 代码
<script>
// 获取form 元素
var form = document.getElementById("yith-wcwl-form");
// 获取action 值
var action = form.getAttribute("action");
// 给form 表单赋值
document.getElementsByName("wishlist_link")[0].value = wishlistLink;
</script>
本方法可以将html代码中 任何数据传送给form 表单