如何在联系表格 7 Wordpress 中添加自定义 JavaScript 功能答案

【问题标题】：How to add custom javascript function in contact form 7 Wordpress如何在联系表格 7 Wordpress 中添加自定义 JavaScript 功能
【发布时间】：2013-12-25 05:31:33
【问题描述】：

我在 wordpress 中使用联系表 7 时遇到问题，需要大家帮助。问题：我有单选框，有两个选项是或否。如果有人选中 yes 选项，则应显示 div 一个，如果他单击 no，则应显示 2nd div。我写了一个代码，但在联系表格 7 中我们会如何，我不知道。这是代码。

$(document).ready(function() {
//Hide the field initially
$("#div one").hide();
  $("#div two").hide();

$('[radio radio-928]').change(function() 
{
    if ($("[radio radio-928]").val() == "yes") 
    {
        $("#div one").show();
    }
    else {
        $("#div two").hide();
        }
        if ($("[radio radio-928]").val() == "no") {
        $("#div two").show();
    }
    else {
        $("#div one").hide();
        }
});
});

【问题讨论】：

标签： javascript wordpress plugins contact-form-7

【解决方案1】：

我知道这是一篇旧帖子，但我想分享我的发现，以防以后有人需要。

OP 问题定义为代码中的空白行，表单编辑器在每个新行中添加 P 元素。如果您打开 js 控制台，您将看到指出代码的错误。

还有一点我们应该注意，我花了很多时间才弄清楚，编辑器删除了反斜杠。我正在添加一些输入掩码验证并找到此代码：

 v = v.replace(/\D/g, "");

保存后变成这个：

 v = v.replace(/D/g, "");

因此，一种解决方法是这样声明：

 v = v.replace(/\\D/g, "");

但是，每次保存时，反斜杠都会被删除，因此我需要将其源代码保存在其他地方，每次都将其粘贴到编辑器中。

最后，我刚刚添加了一个自定义 html 小部件，其中所有自定义 js 都在一个脚本标签内。它将使代码在网站中全局工作，但这是我确保用户不会弄乱表单掩码和验证代码的方法。

【讨论】：

【解决方案2】：

如果您的函数在 JS 控制台中有效，但保存在表单中时无效，请确保它没有空行。

出于某种原因，这些都变成了 p 标签，至少在我使用过的网站上，编辑器并不是真正的 HTML 感知。

例如按类将特定输入框的第一个字符大写。

<script language="javascript" type="text/javascript">
jQuery(function($){
// Capitalize first character as needed.
$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)/g, function($char) {
            return $char.toUpperCase();
        }));
        box.setSelectionRange(stringStart, stringEnd);
    });

   return this;
}

$('input[type=text].capitalize').capitalize();
});
</script>

一旦我删除了新行，它就可以使用 facepalm...

【讨论】：

【解决方案3】：

将插件添加到您的 Wordpress：由 WPBeginners 插入页眉和页脚
激活插件并进入设置->插入页眉和页脚
在脚本标签中添加您的 JavaScript 代码。当您的页面加载时，此脚本将位于您的 DOM 的头部
在联系表 7 上，使用 HTML 代码添加按钮，添加代码中提到的相应 ID 属性以控制您的文档。

我一直这样做，特别是为了使用 jQuery。

【讨论】：

【解决方案4】：

只需将 JavaScript 函数添加到您的页面，然后在联系表单管理页面底部找到“附加设置”字段并使用 on_submit JavaScript 操作挂钩，如下所示：

on_submit: "MY_JavaScript_function_Name();"

【讨论】：

我想添加更多文件按钮，我想在用户点击添加更多按钮时调用一个函数。我应该如何在附加设置中调用它。

【解决方案5】：

这可以在 Contact Form 7 编辑框中完成，如下所示：

<script type="text/javascript"> 
function showdiv(element){ 
document.getElementById("div-one").style.display = element=="yes"?"block":"none";                      
document.getElementById("div-two").style.display = element=="no"?"block":"none"; 
} 
</script>
<input type="radio" name="choice" value="yes" onclick="showdiv(this.value);"> Yes<br>
<input type="radio" name="choice" value="no" onclick="showdiv(this.value);"> No<br>

<div id="div-one" style="display:none;">Yes</div>
<div id="div-two" style="display:none;">No</div>

【讨论】：