We Keep Coding

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

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!

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>

move text three before the input tag the checkbox is not disappearing

if I move text three before the input tag the checkbox is not disappearing when I click the third time.
but when I keep text three after input tag it works fine.
can you tell me how to fix it.
providing my code below
https://stackblitz.com/edit/angular-w6tqvn?file=app/app.component.html
<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
<span id="redSquare"></span>
three
<input type="checkbox" name="rememberLogin" id="buttonId" (click)="open()">
</label>

It is not like it does not work when you keep text before input box. It is because in first case you are providing class to label while in other you are providing it to span. so just provide [ngClass] to label
<label [ngClass]="{'is-multiple-of-4':multipleOf4}">
<span id="redSquare4"></span>
<input type="checkbox" id="39" name="DownlinkSource" (click)="downlinkCheckBoxClick()"/>
4
</label>

If what you mean by disappearing is showing the redSquare,
you should move span after the text "three".
<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
three<span id="redSquare"></span>
<input type="checkbox" name="rememberLogin" id="buttonId"
(click)="open()">
</label>

How can I check a radio button with no id using a single line of javascript (no jQuery)?

All right, this is a pretty specific question from a beginner, so bear with me.
I'm a newbie just learning the ropes. Here's the background (skip to next para if you don't care): I'm updating my first android app and I'm using MIT App Inventor 2 to do it. It's a free tool online that uses a WYSIWYG screen editor and Blockly to create behaviors, interactions, etc. The app I'm making loads a specific web page with a form and fills out most of the form for you (specifically, it's to help people enter the online ticket lottery for a theater show). The page is not my own so I can't edit the HTML. But I can run javascript on top of it by plugging single lines of javascript code into the Blockly side of App Inventor. Here's a relevant example of how it looks.
I've figured out how to fill in most of the form using getElementByID(). But there's a set of radio buttons that have no id. Here's a lightly modified version of the HTML (which I cannot edit):
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value."
patternID="0" customRegex="" />
</div>
I've made some progress by using the following:
document.querySelector('input[name=tickets]').checked = true;
But that of course only selects the first radio button. I'd like to able to get a value (1 or 2) and have it select the right button accordingly. The Blockly backend I'm using allows me to define a variable to plug into the line of javascript, but the line of javascript itself has to be essentially a single line. I was hoping one of the following would work if I wanted the value to be 2 for example:
document.querySelector('input[name=tickets][value=2]').checked = true;
document.querySelector('input[name=tickets]').2.checked = true;
But neither does. Any ideas on the correct syntax?
Thank you!

You need to place the value that you are trying to select using in quotes:
document.querySelector('input[name=tickets][value="2"]').checked = true;
Example
document.querySelector('input[name=tickets][value="2"]').checked = true;
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
</div>

How to set the class="required" jquery for radios under a row and not attacheing it to the first radio

Hi im at coding a form and i needed a validation form for my radio and checkbox inside my form so i searched around the net and found out that jquery 1.3+ has class="required" tag that does exactly what i wanted but
i have this section of radios :
<label class="label" type="radio" name="sloganch" >Does your slogan need to be incorporated in your Logo Design ?</label>
<div class="inline-group">
<label class="radio"><input type="radio" name="radio-inline" class="required" ><i></i>Yes</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>No</label>
<label class="radio"><input type="radio" name="radio-inline"><i></i>Maybe</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>I decide later</label>
</div>
And if i put the class="required" on the first radio when it calls this function it distort my radios by attaching " This field is required" to my first radio
and distort the complete line of radios .
Is it possible somehow to fix this to set for eg the " This field is required" under the complete row ? thanks in advance

this should work
$("input:radio:not(:first)").addClass("test");
EDIT
This should work i have also included a js fiddle for your reference
the above code will add class test to all the radio buttons except the first
JS Fiddle

Only one checked checkbox allowed in a grid

Is it possible to have a CheckboxColumn in a grid panel that can be checked on only one row at a time ?
I've tried Googling what I'm looking for and I'm not finding much.
Do I need to do something at the store level and at the grid level ? I'm halfway through coding a logic that does it using the checkchange event, but I wondered if I'm writing useless code :)
Thank you.

Your best option as suggested in the comments is to use radio buttons.
The key is to give them all the same name. For example:
<form>
<input type="radio" name="firstname" id="Fred">
<input type="radio" name="firstname" id="Joe">
</form>
Then, when one of these radio buttons is selected, any other radio button with the same name will be unselected.