[Gelöst] Label-for-tag is wrong since last update

[Author]

Artikel

[dianaM-4]

I styled my checkboxes in a CRED-form with CSS and hided the checkbox-input-field. Because the for-tag of the label did match the input-ID, the label was clickable to check the checkbox. But after my last Toolset-Update unfortunately the two don't match anymore, so my checkbox-labels aren't clickable anymore.

So for example, my checkbox-code for my "services"-checkboxes in CRED itself looks like:

<div class="cred-field cred-field-anfr-services">
  <label class="cred-label">Welche unserer Services möchten Sie in Anspruch nehmen?</label>
  [cred_field field='anfr-services' post='anfragen' value='' urlparam='']
</div>

And the output in html looks like:

<div class="cred-field cred-field-anfr-services">
    <label class="cred-label">Welche unserer Services möchten Sie in Anspruch nehmen?</label>
    <div class="js-wpt-field-items form-group js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="checkboxes-wpcf-anfr-services">
        <ul class="wpt-form-set wpt-form-set-checkboxes wpt-form-set-checkboxes-wpcf-anfr-services">
            <li class="wpt-form-item wpt-form-item-checkbox checkbox-parkmoeglichkeit-pkw-kostenlos">
                <input type="checkbox" id="form-2083481400" name="wpcf-anfr-services[]" data-wpt-type="checkbox" data-wpt-id="cred_form_793_1_form-2083481400" data-wpt-name="wpcf-anfr-services[]" value="wpcf-fields-checkboxes-option-af5c33be92975cff6373621956be395a-1" data-value="Parkmöglichkeit PKW" class="wpt-form-checkbox form-checkbox checkbox">
                <label class="wpt-form-label wpt-form-checkbox-label" for="3c20">Parkmöglichkeit PKW (kostenlos)</label>
            </li>
        </ul>
    </div>
</div>

Please note, that the id of the input is "form-2083481400", but the for-attribute of the label is "3c20". They should match. Otherwise it wouldn't make any sense.

So I assume, this is a bug?
Please for help!

PS: If you wanna see it in action, please
* go to versteckter Link
* scroll down to one of the listet rooms
* click on "ENQUIRY"
* and in this enquiry-form all of the checkbox-labels aren't clickable!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I've checked with my test install and checked with checkboxes field having three options. When I've added the checkboxes field to CRED form I got following markup for checkboxes field with th:

<div class="form-group">
		<label for="form-765966772">std-interest</label>
		<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="checkboxes-wpcf-std-interest"><ul class="wpt-form-set wpt-form-set-checkboxes wpt-form-set-checkboxes-wpcf-std-interest">
<li class="wpt-form-item wpt-form-item-checkbox checkbox-cricket">
<input id="form-765966772" name="wpcf-std-interest[]" data-wpt-type="checkbox" data-wpt-id="cred_form_496_1_form-765966772" data-wpt-name="wpcf-std-interest[]" value="wpcf-fields-checkboxes-option-c74898e756f6d686ef85b4f698981414-1" data-value="1" class="wpt-form-checkbox form-checkbox checkbox checkbox" type="checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="form-765966772">Cricket</label>
</li>

<li class="wpt-form-item wpt-form-item-checkbox checkbox-chess">
<input id="form-567992304" name="wpcf-std-interest[]" data-wpt-type="checkbox" data-wpt-id="cred_form_496_1_form-567992304" data-wpt-name="wpcf-std-interest[]" value="wpcf-fields-checkboxes-option-38c04ad69b110bab18212879b76a52e9-1" data-value="1" class="wpt-form-checkbox form-checkbox checkbox checkbox" type="checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="form-567992304">Chess</label>
</li>

<li class="wpt-form-item wpt-form-item-checkbox checkbox-football">
<input id="form-710486144" name="wpcf-std-interest[]" data-wpt-type="checkbox" data-wpt-id="cred_form_496_1_form-710486144" data-wpt-name="wpcf-std-interest[]" value="wpcf-fields-checkboxes-option-e218778492d17e146426edf8124c545f-1" data-value="1" class="wpt-form-checkbox form-checkbox checkbox checkbox" type="checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="form-710486144">Football</label>
</li>

</ul>
</div>
	</div>

I've following code in my CRED form which generates the checkboxes markup:

<div class="form-group">
		<label>std-interest</label>
		[cred_field field='std-interest' post='student' value='' urlparam='']
	</div>

As I'm not able to reproduce the issue - could you please make sure:
- You are using latest Toolset plugins and ALL Toolset plugins are updated.
- If ALL plugins are updated, could you please try to regenerate the form field and try to resolve your issue.

[dianaM-4]

Hi Minesh!

I tried, what you suggested. All my plugins are up-to-date. And I also tried to disable all plugins (except the Toolset ones) and switched to Toolsets original starter-template. Didn't change anything. Same strange for-attributes in my labels.

In the meanwhile I found out, that everything's working fine, if I'm placing the exact same CRED-form anywhere else on my page – then the for-attribute fits the input-id! But I need my form in a bootstrap-modal-window and there – suddenly – the for-attribute changes.

I tested my site with deinstalled bootstrap (I deleted the bootstrap-folder in the toolset-starter-theme). Then the label-attributes are correct again. So I assume that there is a problem with the bootstrap-compatibility?

Can you confirm this?
Could you please try to place your CRED-form in a modal-window?

Thanks again
Diana

[Minesh]

Could you please share how you added to bootstrap popup to make sure I should use the same code and that will help me to reproduce the issue.

[dianaM-4]

I placed the modal in a content-template and the link to the modal in a page. Both placed in different rows of a layout. Anyway I don't think it's really relevant, where you place the modal-window, because I tried out many ways – all with the same output.

My code for the bootstrap-modals:

 
<div class="modal fade anfrage" tabindex="-1" role="dialog" aria-labelledby="anfrage">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Anfrage-Formular</h4>
      </div>
      <div class="modal-body">
        [cred_form form='anfragen' form_name='Anfragen']
      </div>
    </div>
  </div>
</div>

And the link for displaying the modal-window:

<a role="button" data-toggle="modal" data-target=".anfrage">ANFRAGE</a>

My Bootstrap-version:
Bootstrap 3.3.7 from Toolset Starter theme.

Please have a look. I'm curios to see if this is happening in my environment only. But if you are getting the same behavior, just delete the class "modal" from the modal-code – then the attributes are changing back again to the correct id.

[Minesh]

Yes - thank you for sharing all required information. I'm able to reproduce the issue and I've escalated it to next Devs, I'll get in touch with you as soon as I know more.

[Minesh]

Well - we checked that this issue is fixed with our develop branch and fix is set to be shipped with next CRED release.

Please hold on for further updates on this.

[dianaM-4]

Hi again Minesh!
I just updated all Toolset-Plugins and the CRED-plugin. But having still the same problem.
Shouldn't it be fixed with this version?

[Minesh]

Hi DianaM-4,

Could you please update ALL Toolset plugins to it's latest official released version and try to resolve your issue. The current CRED version is 1.9.3 and it should resolve the issue.

You can download ALL latest Toolset plugins from:
=> https://toolset.com/account/downloads/