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 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
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 wish I had some js backround I can feel I’m getting close to my goal though !
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
Thank you for your support !
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
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 ?
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
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 @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:
<script>
var x = document.getElementById("dynamic-items").querySelectorAll("div.dynamic-item");
x[DynamicField].setAttribute("id", "item-DynamicField");
</script>
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 ?
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 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 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 ?