Changing the value of a hidden field to the value of a checkbox on submit with javascript inside Contact Form 7 Wordpress plugin

Question

I have been trying to get this working for more than a week now, searching endlessly for the solution and I can't figure out what I'm doing wrong. I am not a coder, just trying to duct tape some functions together to get this working... Please help!

I have the following checkbox inputs on my Contact Form 7 form inside a Wordpress page. I have Mailchimp for Wordpress updating a group which reflects the visitors interests. I'm trying to get the value of the group assigned to a hidden input field so that the built in mail feature and other Zapier integrations can use the interest values. Most of these apps seem to lack support for the groups functionality inside Mailchimp.

The form html is as follows:

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

--

I've tried several variations of this including some inline stuff, putting the code in the top or bottom of the page, putting it into the Additional section of Contact Form 7, putting it into a scripts plugin inside wordpress, trying to see if it's an array thing and trying code for pushing from array (more over my head) and so many others. Here is what I'm basically trying to do, albeit wrongly via this code because obviously it is not working...

JS:

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

--

Online there is not much support for Mailchimp groups, and I suspect groups functions of most contact apps, not even with paid plugin feature. Mailchimp for Wordpress has the most support I could find and you still have to do some tinkering to get it working. I'm soooo ready to know what the heck works instead of all the stuff I've been trying! Thank you in advance. I really appreciate it!

Answer 1

Wordpress disables the $ shortcut, so you need to either replace $ with jQuery or wrap your code:

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

Plus, the name of those checkboxes doesn't contain a hashtag. I also have no idea what you're doing with those dots and linebreaks there. In addition, you're assigning a onchange handler only when the form is submitted, but you'll want that to work from the start instead.

Here's a solution that sets the onchange handler to grab the value from all checked checkboxes and puts it into the hidden input.

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>