I’ve looked around the forum and have seen a few other threads on this, but nothing with an actual resolution to this issue. I have a form with hidden radio buttons that trigger styled labels for a custom radio button effect. In this case, the donation buttons on this page are the ones that are not working, specifically the £50 amount. When I inspect the element I see the label is missing the for attribute and all of the others have it. I’ve tried a ton of stuff, deleting the radio input and rebuilding from scratch, copying and pasting one of the other buttons that is still working. I have gone in and adjusted the IDs, the group name, choice value, data attribute, etc…over and over again and cannot get this to work.
I’m handing this off to a non-profit with no technical staff and having one field with a random embed code to solve this problem seems like it will cause issues and be confusing when they are trying to figure out why one is different than the other.
Any help or follow-up from the Webflow staff would be great, the last post in January that I was able to find on this issue had a post from a staff member saying they would follow up, that was over two months ago at this point so I’m guessing that is not going to happen. Any way to add the "for" attribute to labels? - #3 by samliew
Can someone address this issue or point me in the right direction?
Blaise, thanks for the response! However, I’m looking for a solution to get the for attribute back on the label by default. I didn’t have to add a js workaround to add it to any of the other labels, and handing this off to a non-technical group makes me hesitant to add .js for one outlier that for some reason will not add the attribute on it’s own.
I think I may use it for the time being because I’m running low on time to get this live. However, it would be great if someone from the Webflow team could respond to this. It looks like an issue that has been going on for quite some time, and although it is minor it is irritating.
Obviously your code will need a different selector, I used a class with a data attribute. It works, but I’d much prefere just to have basic HTML in there by default that non-devs can work with.
Thanks for this. The thing is, there’s supposed to be a workaround where you can drag the form label directly above the field you want to associate it with and it will apply the proper “for” attribute. I can’t get this to work though. I have no idea why.
I’m working on a project with a bunch of radio buttons… I designed one and copy and pasted it to create the others… None of them have the “for” attribute correctly assigned. I tried writing up some jquery to fix it in the mean time, but it’s not working. Any idea where I went wrong? all of my label’s have a class of “.dropdownListItem”…
$(document).ready(function(){
$('.radio-button').each(function(index, element) {
var _this = $( element );
var forValue = _this.id;
_this.next(".dropdownListItem").attr("for", forValue);
});
});
I think the .id thing needs to be .attr(“id”) or .prop(“id”) in jQuery, that might not be the only problem, but hard to tell without seeing the full code.
Just posting here because this is still an issue 6 years later Most of the labels seem to sync to the form input id, but I have one that is not, potentially because the input is inside a wrapper. Why not just make this customizable like any other attribute?