Fix invalid for attribute on label tag in forms so that the labels are clickable and accessible

[Jon_Wu]

The HTML generated by the form builder is invalid and therefore the labels for checkboxes aren't clickable by the user. This is also bad for accessibility.

The mistake is that the for attribute of the label references the name of the target input instead of its id. It appears that the label for  input[type=text] on the page is correct so it's possible this is only an issue with checkbox labels.

Here's an example of a label that was generated:

<label for="unsubscribeArticles" class="mktoLabel mktoHasWidth" style="width: 440px;">
  <div class="mktoAsterix">*</div>
  Unsubscribe from Articles:</label>

It's supposed to point to the following input, therefore the for attribute should be mktoCheckbox_95_0 instead of unsubscribedArticles.

<input name="unsubscribedArticles" id="mktoCheckbox_95_0" type="checkbox" value="yes" class="mktoField">

As a workaround, here's some jQuery to reassign the for attribute of any label that points to an id that doesn't exist. However, it would be good if we didn't have to use JavaScript to fix a bug 😉

  $('label').each(function() {
    $label = $(this);
    var labelFor = $label.attr('for');
    if (!$('#' + labelFor).length) {
      $label.attr('for', $('[name="' + labelFor + '"]').attr('id'));
    }
  });

[Anonymous]

Hi Jon,

I can confirm that what you're saying is correct, and we'll file it as a bug in our issue tracking system.  However, there are some caveats to this bug.  This happens if you're using the 'checkbox' type field, but not if you use the 'checkboxes' type field.   When using 'checkboxes', each checkbox gets its own label (configurable positioned, either to the left, or to the right of the checkbox), and each label is separately clickable and clicking the label activates the checkbox.  

Right now, 'checkbox' is implemented as a 'checkboxes' with only one option.  Unfortunately, the logic that worked for the labelling for 'checkboxes' doesn't work when there are no checkbox labels.

One workaround would be to use a type 'checkboxes' field, and use only a single value.  The label that you edit in the edit values screen would then be clickable, and you wouldn't need your jQuery code. 

[Jon_Wu]

Thanks for investigating and filing a bug so quickly Ian. That workaround sounds like a good stopgap until this is fixed. We'll certainly give that a shot and let you know if we have any issues getting that to work.

[Anonymous]

Hi Ian,

I work with Jon. Thanks for your help on this issue. I've switched out our form to use checkboxes with one value, but I'm still seeing the same problem - clicking the label doesn't work. The label for= still points to the input name=, and not the input id=. Is there something I'm missing?

[Anonymous]

Hi Ricky,

Here's step by step instructions of what you'd need to do.
1. In the Form Editor -> Field Details section, select the field in question.
2. In the properties pane, clear out the Label field.
3. In the properties pane, make sure the Field Type is Checkboxes (not Checkbox)
4. In the properties pane, click the Edit Values button.  The checkbox value editor appears.
5. In the Display Value area of the first choice put in the text of whatever you want the label to say.  Leave the Stored Value set to yes.
6. Press save.  The checkbox value editor closes.  At this point if you save and close, the Display Value of the checkbox will be a clickable label that will check/uncheck the checkbox on the rendered form.  

You may then want to change where the checkbox and its display value align by dragging them around and/or changing the Label to Right option in the preference pane.

Another option will be to wait for the August release, as that release will contain the fix for the bug with Label on Checkbox field type that this workaround addresses. 

[Anonymous]

Thanks Ian. So I actually had to move the label from "Label:" to the "Display Value:" within the checkboxes values. That did it. Thanks!