Form Label and For Attribute

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?

Thank you,

Sam


Here is my site Read-Only: https://preview.webflow.com/preview/children-of-rwanda?preview=7d73e559468a73ea019c24fc497225e6

Hi @sam-g

For the £50 donation button, it seems you are missing the “for” attribute, so it can’t work.

You can add an attribute using Javascript : HTML DOM Element setAttribute() Method

Have a look at this stackoverflow thread if set attribute doesnt work : How to add/update an attribute to an HTML element using JavaScript? - Stack Overflow

Hope this can help you a bit…

Best

Hi @Blaise_Posmyouck

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.

Having the same issue. How do add in the “for” attribute to a label? It’s killing my accessibility rating.

I just ended up using @Blaise_Posmyouck suggestion. Here is the code I used:

$('.donate__radio-label[data-value="5000"]').attr('for', '5000');

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.

Been having the same issue here…

Been using Webflow for 3+ years and this is one of the biggest obstacles I’ve come across. Webflow help us out!

Any update on this??

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.

This is one of those bugs that just won’t die.

Its always been a problem and I cant seem to get it to assign the for label to a label above a text area.

The work around I used to use before no longer seems to work with the new editor.

This still seems to be an issue. It would be great if we could just edit the “for” attribute on the label.

Just posting here because this is still an issue 6 years later :slight_smile: 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?