使用 Contact Form 7 Wordpress 插件中的 javascript 在提交时将隐藏字段的值更改为复选框的值

Question

我已经尝试让这个工作一个多星期了，无休止地寻找解决方案，我无法弄清楚我做错了什么。我不是编码员，只是想将一些功能用胶带粘在一起以使其正常工作...请帮助！

我在 Wordpress 页面内的 Contact Form 7 表单上有以下复选框输入。我有 Mailchimp for Wordpress 更新反映访问者兴趣的组。我正在尝试获取分配给隐藏输入字段的组的值，以便内置邮件功能和其他 Zapier 集成可以使用兴趣值。这些应用中的大多数似乎都不支持 Mailchimp 中的群组功能。

表单html如下：

<p>
    <label>Which Are You Most Interested In?</label></br>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="ac2ed8233d" 
        required=""><span>Interest 1</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="s3g2c99k0x"
        required=""> <span>Interest 2</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="k9n6xp3s26"
        required=""> <span>Interest 3</span>
    </label>
</p>

<input type="hidden" id="int-in" name="int-in"</input>

--

我已经尝试了几种变体，包括一些内联的东西，将代码放在页面的顶部或底部，将其放入 Contact Form 7 的附加部分，将其放入 wordpress 内的脚本插件中，试图看看它是否是一个数组，并尝试从数组推送代码（更多在我的头上）等等。这就是我基本上想要做的事情，尽管通过这段代码错误地因为显然它不起作用......

JS：

    $('form').submit(function() {
    $('input[name="#mc4wp-INTERESTS[gs8o25e9bc] . 
    []"]').change(function(){ 
    $('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] . 
    []"]').val());
    });

--

在线对 Mailchimp 群组的支持不多，我怀疑大多数联系人应用程序的群组功能，甚至没有付费插件功能。 Mailchimp for Wordpress 有我能找到的最多支持，你仍然需要做一些修改才能让它工作。我已经准备好知道到底是什么，而不是我一直在尝试的所有东西！先感谢您。对此，我真的非常感激！

Answer 1

Wordpress 禁用了 $ 快捷方式，因此您需要将 $ 替换为 jQuery 或包装您的代码：

(function($){
  // your code here
})(jQuery);

另外，这些复选框中的 name 不包含主题标签。我也不知道你在用那些点和换行符做什么。 此外，您仅在提交表单时才分配 onchange 处理程序，但您希望它从一开始就起作用。

这是一个解决方案，它设置 onchange 处理程序以从所有选中的复选框中获取值并将其放入隐藏的输入中。

var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';

(function($) {
  $(selector).change(function() {
    var interests = Array.from(document.querySelectorAll(selector))
      .filter(e => e.checked).map(e => e.value).join(",");
    $('#int-in').val(interests);
    console.log("set to", interests);
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>Which Are You Most Interested In?</label><br/>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="ac2ed8233d"><span>Interest 1</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="s3g2c99k0x"> <span>Interest 2</span>
    </label>
    <label>
        <input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox" 
value="k9n6xp3s26"> <span>Interest 3</span>
    </label>
  </p>

  <input type="hidden" id="int-in" name="int-in">
  <input type="submit">
</form>