在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>