Capture checkbox value outside webflow form

[anthonysalamin]

Hi there,

I’ve been asking around on stackoverflow to see if someone could come up with a JQuery script to capture the value of a checkbox outside of a form tag and paste it into a hidden input inside the form tag.

I did try that script, which seems legit, but it seems webflow doesn’t take it into consideration.
Does someone have a hint maybe ?

script

$("#reservation").submit(function(evt) {
  //handleCheckbox
  $("#inside").val($('.outsider:checked').val());
});

Custom form html

<div class="w-form">
  <form id="reservation" name="reservation" date-name="reservation" >
    <input type="hidden" id="inside" name="inside" date-name="inside" />
    <input type="text" id="name" name="name" date-name="name" placeholder="Name please" >
    <input type="submit" value="Send" data-wait="Wait..." />
  </form>
</div>

Custom html checkbox outside the form

<input type="checkbox" id="outsider" class="outsider" name="outsider" date-name="outsider">

Some screenshots:

[Koen]

Does it works when you place it in a “form” element?

[anthonysalamin]

@Koen Interesting !

I just tried to put the script inside a custom code inside a “form” element but still can not capture the value of the checkbox unfortunately.

[Koen]

ai… I was hoping it could work… bad idea… sorry! I really don’t know another solution…

[anthonysalamin]

Thank you for your help anyway !

I’ve been trying this script instead which to me looks more elegant as I don’t have to hide an input field inside the form, the script (if I understand correctely) simply adds the outsider checkbox to the form submit function:

var form = document.getElementById("reservation");
document.getElementById("outsider").addEventListener("click", function () {
  form.submit();
});

The scipt is doing something, as the submit button stays “blocked” on its wait-data: wait… But no email are being sent unfortunatelly.

[anthonysalamin]

I have read on the jQuery page that we can also select only checked checkboxes with the $( "form :checked" ); selector, but once again, seems to work only for checkboxes inside the form tag @zbrah, should you wish to have a look

EDIT:

Found some interesting stuff about how to select checkboxes here

[aaronocampo]

Hello @anthonysalamin

I was thinking about your request and I wanted to understand a little bit more about your issue.

What’s the overall objective of this capturing the value of a checkbox and post it through the form?

[zbrah (Mazette.co)]

@anthonysalamin sorry but i’m lost at this point
I ll try to have a look this week to update myself on your issue.
Maybe @aaronocampo ll save you until that time

[anthonysalamin]

Hi guys @aaronocampo & @zbrah,

I’m glad you asked and I’m happy to try give some clarifications. I made some ultra simplied UI design and a simplifed mindmap to better showcase how I would love things to work with Webflow.

To sum up everything briefly:

Th overall objective of capturing checkboxes values and post it through the form, is to allow me, on the Webflow Form Settings, to have the most practical overview possible, of who has booked which event, and at which date (by event I mean a spectacle, a show… some event can take place 2 times a month, sometime 6 times a month, you get the idea).

Because dates aren’t the same for each event, I had to create a second CMS collection list with all the dates possible. I would then multi-reference those dates for each events in the CMS collection list “events”, which I did successfuly.

What I’ve done sofar, successfuly:

On the event page template, I succesfuly integrated the CMS colletion list “Dates” in which I integrated the checkboxes pulling their data from the event’s multi-reference field.

I have also successfuly integrated on the same event page template, a custom code webflow form, which pulls its ID, Name and Data-name from a dynamic field which refers to the name of the event. It works beautifuly - on the Webflow Form Settings, all event’s form are created dynamically.

What I’m feeling desperate with:

I desperately need to connect those dynamic checkboxes with the dynamic form element. The idea was to use a little bit of jQuery inside the custom code form component, to “capture” every checkboxes on the event’s page, to add them to the submit function.

Please let me know if it’s a bit more clear or if you also feel I should give up ?

Thank you for looking

[aaronocampo]

Ok, I’ve been thinking about this for a while now and I have some doubts about the Collection ‘dates’ which I assume it changes every time there’s a new event right?

I’m saying this because I assume every time you add a new event to your ‘events’ collection you go and add dates for that event into the ‘dates’ collection to the multireference those dates right?

Maybe you want it in this specific way but wouldn’t be easier to create x amount of fields for dates into the events collection and every time you add a new event you add the number of dates that the show is going to be available?

I’m still getting my head around the whole thing but I think it can definitely work.

[aaronocampo]

On the other hand, can you share your read only and webflow live link?

[anthonysalamin]

Sure thing @aaronocampo , thank you for your ideas.
I will work all night try something.
I just thought my “Dates Collection List” would be the cleanest & logical way to do the trick.

Meanwhile, here is the read-only link

If you wish to play around, feel free to go on the “Evenements Template” page and select the event “Solution Intermédiaire” (it’s the event I set up the multi-reference list so far) See the attached screenshots.

Thanks again for your time !

EDIT:

wouldn’t be easier to create x amount of fields for dates into the events collection and every time you add a new event you add the number of dates that the show is going to be available?

Not sure what you mean by that actually ? Because we are limited to max 30 fields per items, it could become tricky with events containing many dates.

[anthonysalamin]

Well well well @aaronocampo, your idea kind of works !

The only problem is, I can’t ask the client to get into the custom code and add / remove the right checkboxes… unfortunately… That is precisely the reason why I found the Webflow CMS so beautiful, allowing clients to login and add events and stuff within CMS. The people I’m working for are performance artists and manager with no knowledge whatsover of code… Even I - am quite limited when it comes to code.

I think we’re getting closer… just wish I could find a way with that script, the Date CMS Collection List and multi-reference fields… those are so poweful and promising !

EDIT:

A friendly developer on stackoverflow offered me a really interesting alternative to the previous code I wrote. His code captures the value of a checkbox outside its form element and past it into an input field inside the form.

I tried to implement the script within webflow and it worked ! The trick was to add the script not in the custom code element where the form is but on the custom code project settings.

The only issue with having the script outside the custom code form element, is that I can not play with dynamic field anymore therefor can not make the form dynamic no more.

My question is:

Is there a way to implement the script within the custom code form element instead of the Webflow footer custom code setting ?

[Brando (Brandon Roche)]

@anthonysalamin one option may be to add this new script to the Before </body> tag on your collection page. In theory this should work perfectly as it will allow you to use dynamic bindings:

[anthonysalamin]

awesome @brando, thank you !

I’ve wrote a new script with the idea to append html element inside my form element… namely my checkboxes and it totally works now on a “static” test page (see screenshots)

Hopefully, it will work aswell on a CMS page with dynamic fields added to the script ! I’m getting closer and closer to what I’m looking for

Here the script I used:

//define the variable for all checkboxes on the page
var allCheckboxes = $( "[type=checkbox]" ); 
  //calls the append function on form submission
  $("#form-element").submit(function(event) {
    //insert all checkbox type elements into the form with id="form-element"
    $("#form-element").append(allCheckboxes);
});

[aaronocampo]

Wow @anthonysalamin !!

Is it working now then!?

[anthonysalamin]

Thank you @aaron , I thought I did it… I just tried again and again but unfortunately it doesn’t work with CMS template page through dynamic binding.

I don’t understand, I did exactely like on the static example, just replaced the needed field with dynamic binding but I must be missing something, something tiny

@Brando, @bart, maybe you guys have an idea ?

Read-only link

UPDATE of the code used, still doesn’t work:

// wait for DOM to be ready
$( document ).ready(function() {
    //define the variable for all checkboxes with class="outsider" on the page
	var allCheckboxes = $("input:checkbox[class=outsider]"); 
	//calls the append function on form submission
	$("#form-element").submit(function(event) {
    	//insert all checkbox type elements into the form with id="form-element"
		$("#form-element").append(allCheckboxes);
	});
});

[anthonysalamin]

Okay well I have given up on the append function to capture checkboxes information.
Instead, I will use your technique @aaronocampo and generate the checkboxes directely inside the custom form through dynamic binding.

Some guys at stackoverflow helped write a little script to target and remove checkboxes that would not have any date specific date set in the event’s collection list. It actually works so thank you for your suggestion.

The only limitation of this technique, is that every event are limited to a specific maximal number of date defined by the actual number of checkboxes that I set in the form custom code. Weird that the append script doesn’t work as the script I’m using now also interacts with the dynamic ids of the checkboses.

Wish I could have made my “capture checkboxes” script work but I need to move on with the project. Maybe I’ll find a way later

Bellow some screenshots to illustrate the idea:

Anyway, thank you all for your help ! Appreciate

[aaronocampo]

I’m sorry to hear that your code is not working after all that effort you put in.

I’m glad that at least the idea I suggested helped a bit. Speaking about this, why are you using normal text fields instead of the native Date fields? and second, if you’re using this ‘native’ solution, why are you using a custom code form?

[anthonysalamin]

I am using normal text field as webflow doesn’t support management of international date display, it always displays “à la american way”, not european or “french way”.

I’m using custom code for the form because if i use native form, i will just have one big mess of a form in webflow form settings with all the data from the 27 events that I have. Besides, the client asked me to be able to download a CSV file with the data for each events. So I thought a custom form with dynamic binding for its name would be the best option as it dynamically creat data forms in the webflow form setting tab