in cred edit user form with radio field (of a types CF) the auto-gen label next to it is missing the FOR attribute
my site use Hebrew lang', and the label is in hebrew
i'm sure i've done something in a wrongly fashion
can you help me figure out what is the issue?
>> I am trying to:
... use the linkage mechanism when a <label> FOR attribute is for a <radio> with the same ID
in order to style the radio's as buttons (css hide the radio and button-ize the label)
this is the markup auto generated in the form - never been touched:
<div class="row">
<div class="form-group col-md-12">
<label>[cred_i18n name='user-order-type-label']<h3 class="form-title">מה רוצים להזמין ?</h3>[/cred_i18n]</label>
[cred_field field='user-order-type' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
on a support forum-post ("cant-associate-a-form-label-with-a-form-control/#post-574382" **) it imply from beda's answer that it is planned (09-28-2017) or already implemented to have a FOR att on the <label> of <radio>s and <checkbox>s (and maybe also on selects in the future)
** https://toolset.com/forums/topic/cant-associate-a-form-label-with-a-form-control/#post-574382
Link to a page where the issue can be seen:
hidden link
>> I expected to see:
<label for={{radio id}}> FOR att' on label elements adjacent to radio element
<input type="radio" id="form-1067576776" name="wpcf-user-order-type" value="delivery" class="form-check-input wpt-form-radio form-radio radio js-wpt-validate" data-wpt-field-title="user order type" checked="checked" data-wpt-type="radio" data-wpt-id="cred_user_form_2162_1_form-1067576776" data-wpt-name="wpcf-user-order-type">
<label class="wpt-form-label wpt-form-checkbox-label form-check-label" for="form-1067576776">ארוחה עם משלוח</label>
>> Instead, I got:
<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="radios-wpcf-user-order-type"><ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-user-order-type">
<li class="wpt-form-item wpt-form-item-radio radio-%d7%90%d7%a8%d7%95%d7%97%d7%94-%d7%a2%d7%9d-%d7%9e%d7%a9%d7%9c%d7%95%d7%97 form-check">
<input type="radio" id="form-1067576776" name="wpcf-user-order-type" value="delivery" class="form-check-input wpt-form-radio form-radio radio js-wpt-validate" data-wpt-validate="{"required":{"args":{"1":true},"message":"שדה חובה"}}" data-wpt-field-title="user order type" checked="checked" data-wpt-type="radio" data-wpt-id="cred_user_form_2162_1_form-1067576776" data-wpt-name="wpcf-user-order-type">
<label class="wpt-form-label wpt-form-checkbox-label form-check-label">ארוחה עם משלוח</label></li>
<li class="wpt-form-item wpt-form-item-radio radio-%d7%90%d7%a8%d7%95%d7%97%d7%94-%d7%91%d7%90%d7%99%d7%a1%d7%95%d7%a3-%d7%a2%d7%a6%d7%9e%d7%99 form-check">
<input type="radio" id="form-1953939442" name="wpcf-user-order-type" value="pickup" class="form-check-input wpt-form-radio form-radio radio js-wpt-validate" data-wpt-validate="{"required":{"args":{"1":true},"message":"שדה חובה"}}" data-wpt-field-title="user order type" data-wpt-type="radio" data-wpt-id="cred_user_form_2162_1_form-1953939442" data-wpt-name="wpcf-user-order-type">
<label class="wpt-form-label wpt-form-checkbox-label form-check-label ">ארוחה באיסוף עצמי</label>
</li>
</ul>
</div>
at the end... of writing this, i fixed it with some jquery and duct-tape 🙂
but still interested to know if there an issue of some sort
the quick-fix (connecting adjacent radio+label for&id attributes) with jquery:
jQuery( document ).ready(function() {
// target all cred radio input elements and iterate them
jQuery('.cred-user-form input[type="radio"]').each(function(){
// get the "Radio" el' "id" attribute
var radio_id = jQuery(this).attr('id');
// each "Radio" el' > get next sibling "Label" el' > change 'for' attribute to var['radio_id'] and add a css class to declare a "readiness" to be styled as button by hiding the radio el'
jQuery(this).next('label').attr('for', radioid).addClass('radio-btn-style-ready ');
jQuery(this).addClass('radio-btn-style-ready');
});
});
