我关注了this动态自动填充使用联系表单 7 创建的表单的教程。 为了自动填写表格,我使用插件 Contact Form 7 Dynamic Text Extension .
首先我将以下函数附加到 function.php
// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
$qvars[] = 'chalet';
return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );
function echo_chalet() {
global $wp_query;
if (isset($wp_query->query_vars['chalet']))
{
print $wp_query->query_vars['chalet'];
}
}
contact 7 表单有一个主题的动态字段:
[dynamictext enquiry-chalet "CF7_GET key='chalet'"]
例如,我可以使用具有不同主题的相同表单,这些主题会根据单击的链接自动填写。 该链接仅需包含对小屋的查询。
www.mysitexyz.com/link/to/page/with/form.php?chalet=request
www.mysitexyz.com/link/to/page/with/form.php?chalet=cancellation
表单的主题填写“请求”或“取消”。 这很好用。
现在我想在与链接相同的页面上自动填充一个表单。
链接现在包含一个 anchor :
www.mysitexyz.com/link/to/page/with/form.php?chalet=chaletname#myFormDownHere
单击链接,页面将向下滚动到 anchor 。我的 wordpress 主题顺畅地向下滚动。但该字段不会自动填充。单击具有浏览器功能的页面以在新选项卡中打开。然后页面向下滚动到 anchor 并正确填写表单字段。但这不是人们通常做的。
如何通过正常点击链接获得相同的结果?
最佳答案
使用 jQuery,您可以这样做:
<a href="#" data-chalet="YOUR-VALUE" class="chalet-choser">Click here</a>
然后
$('.chalet-choser').on('click', function(e) {
e.preventDefault();
$('input[name="enquiry-chalet"]').val( $(this).data('chalet') );
return false;
})
关于javascript - 自动填充 contact 7 表单,并在同一页面上提供指向 anchor 的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33790518/