(SOLVED) Dynamic Checkbox ID

Hi there :heart_eyes:

I had the chance to come across Dave’s webflow project explaining us how to dynamically change element’s ID on a page. I am trying to reproduce the custom embed code used to apply it to my little multi-field reference checkboxes.

I think I’m getting close to get it working, the only thing is I’m not sure I know how to “define” a checkbox in the custom embed code. (it’s certainly not a .div, is it ?)

I guess my question is, how to ask the script to target the checkboxes instead of the .div used in Dave’s project example ? Could it be .input ?

Thank you so much !

My read-only link

Hey @anthonysalamin

Not sure what you need exactly because I am not familiar with Dave’s project. But here is how a webflow checkbox appears in the site’s code.

<div class="w-clearfix w-checkbox"><input type="checkbox" id="100-Pages" name="100-Pages" data-name="100 Pages" class="w-checkbox-input"><label for="100-Pages" class="w-form-label">More than 100 pages</label></div>

1 Like

Hi @matthewpmunger !

Thank you for the checkbox code definition !
So if I understand correctely, a checkbox is a div ?

That checkbox example you showed me, is a checkbox which was not been given a specific class right ?
Should I give my checkbox a “dynamic-checkbox” class, in my embed code that would mean I can define my checkboxes as “div.dynamic-checkbox” ?

Correct. My checkbox was not assigned any classes in the Designer, it was all provided by the Webflow element.

In the designer, you can target any of the three elements of the checkbox form field. Maybe just trial and error of assigning the class to either the div or input and testing on the published site.

Designer Name - Checkbox Field
Class Name - .w-checkbox
Element Type - wrapping div

Designer Name - Checkbox
Class Name - .w-checkbox-input
Element Type - input box

Designer Name - Label
Class Name - .w-form-label
Element Type - text label

Well well well :slight_smile:

I haven’t succeeded yet but I’m progressing. I just realised, that when I get an email from a Webflow 's form someone just filled on the internet, the checkbox’s name isn’t actually based on its ID but on its name instead. Am I right ?

I’m wondering then, how could I ask the .querySelectorAll and the .SetAttribute queries to target a “name” instead of an ID. Fron the your last message, I suppose I should use the element type which is “input” ? It is driving nuts :joy: wish I had some js backround :sunglasses: I can feel I’m getting close to my goal though !

I don’t know JQuery, but it sounds like you are on the right track. Maybe it’s just a process of elimination.

1 Like

Thank you,

I’ve checked some JQuery methods online, this is as far as I can (will ever) get.
I guess I’ll have to wait for a divine webflow intervention to get those two lines working :blush:
Thank you for your support !

Hi guys :slight_smile:

I’m not giving up, I found a little javascript explanation on how to change ID’s and tried to replicate what I’ve saw… unfortunately still unsuccessful yet.

I found my code pretty well staright forward for Webflow though :joy:
Does someone have a lead or an idea for me ?
If it’s just not possible to dynamically change a checkbox’s id please let me know.

@zbrah, @Brando : I continue my post on the help code category, maybe it’s the more appropriate ?

Thank you !

Read-only link

Hi again :slight_smile:

I’ve successfuly re-wrote a little JQuery script within codepen to try change the id of an html element.
The JQuery script works really well in codepen but when I implement the same idea within webflow and with the dynamic embed, well it does not work anymore.

Am I using the wrong strategy maybe ?
Thank you for your help

Wish I could be of help. :disappointed:

1 Like

Thank you,

Do you know where I could hire a freelancer ?
I feel desperate having spent so much time being unsuccessful.

Time for @samliew to swoop in. :muscle:

That’s because you are loading jQuery a second time. You don’t need to do that because Webflow does that before the page footer for you.

Could you move the rest of the script to the page footer?

Hi Sam :slight_smile: Thank you for stepping in !

I removed the jQuery loading script but it still doesn’t work.
When I fill in the form and check one of the checkbox, I still get an email with “checkbox: false” and not : “dynamic name of the checkbox: true”

Unfortunately if I move the code to the page footer (before </body> tag), I don’t find my “Dynamic ID” custom field. I only find that custom field within an embed compnenent itself contained into the collection list containing the multi-reference fields.

EDIT: @samliew, I’ve rewrote the little codepen script to affect the id of a checkbox, I inspected the checkbox element afterwards and it seemed that its id got successfully changed by the jQuery. What are your thoughts on this ?

Okay, it seems like even if I don’t dynamically try to change the checkbox id, but transform it instead through the simple function to something like id=“please”, the checkbox still keeps its initial id.

There is a little something missing somewhere :slight_smile:
@samliew maybe ?


Hint: element IDs has to be unique. The ID selector in each custom code also has to be unique. By placing the checkbox and custom code in a Collection List, all of them get the same ID, value, etc. so obviously it won’t work.

Interesting ! That’s why I got inspired by @cyberdave promising technique for “Dynamic-IDs-with-Collection-Items” and it does work in his example eventhough all elements are in a colleciton list. This is why I started this whole research thing about dynamic checkbox.

His script:

  var x = document.getElementById("dynamic-items").querySelectorAll("div.dynamic-item");  
  x[DynamicField].setAttribute("id", "item-DynamicField"); 

I think he used javascript but i couldn’t understand and reproduce its logic to my project so I “rewrote” the script with jQuery syntax. Maybe that’s the problem ?

His example has nothing to do with checkboxes.

You can’t use the same method with form fields, as they have additional processing from Webflow’s form initialization script.

1 Like

Well that’s a pitty. Thank you for your time and explanations @smaliew.

I will post on the freelancer section, maybe someone has an idea to use something else than checkboxes to select those event’s multi-reference fields inside my form.

I have just found something new acutally :slight_smile:

I realise that when I ask the script to target the class of the checkbox instead of their ids, webflow actually do show those two checkboxes with apparently two different id : “Field 1” and “Field 2” (see screenshot)

The script doesn’t work yet but there is definitely something right happening within webflow which now doesn’t interpret anymore the two checkboxes pulled from the multi-reference field as one single checkbox in the email I get.

Interesting :thinking: isn’t it ? I wonder if there is a way to interact with the Webflow additonal pressing form initialization script you mentioned to replace the Field 1 and Field 2 with a dynamic file instead ?