[Resolved] Forms seems to be changing the label “for” value in some radio buttons

[Author]

Posts

[Tim Elliott]

My initial problem is that the radio button html structure that views produces is

<ul>
<li><label><input></label></li>
<li><label><input></label></li>
</ul>

To use some sibling combinators I need the structure to be different. The cred generic fields are better as they output:

<ul>
<li><input><label></label></li>
<li><input><label></label></li>
</ul>

What I need is a structure that's just:

<fieldset>
<input><label></label>
<input><label></label>
</fieldset>

So I've created a shortcode to produce the required output:

// Star Rating Shortcode
add_shortcode("rating_stars_shortcode", "rating_stars_function");
function rating_stars_function ( $atts = '' ) {
    $value = shortcode_atts( array(
        'field' => ''
    ), $atts );
	
	$output = "";

	$output .= '<div class="star-rating">';
	$output .= '  <fieldset>';
	$output .= '        <input type="radio" id="form-'.$value['field'].'5" name="'.$value['field'].'" value="5">';
	$output .= '        <label for="form-'.$value['field'].'5">5</label>';
	$output .= '        <input type="radio" id="form-'.$value['field'].'4" name="'.$value['field'].'" value="4">';
 	$output .= '        <label for="form-'.$value['field'].'4">4</label>';
	$output .= '        <input type="radio" id="form-'.$value['field'].'3" name="'.$value['field'].'" value="3">';
	$output .= '        <label for="form-'.$value['field'].'3">3</label>';
 	$output .= '        <input type="radio" id="form-'.$value['field'].'2" name="'.$value['field'].'" value="2">';
	$output .= '        <label for="form-'.$value['field'].'2">2</label>';
	$output .= '        <input type="radio" id="form-'.$value['field'].'1" name="'.$value['field'].'" value="1">';
	$output .= '        <label for="form-'.$value['field'].'1">1</label>';
	$output .= '  </fieldset>';
	$output .= '</div>';
	
	return $output;
	
}

This works just fine if I call the shortcode from a page, a view or a content template, but when I call it from inside a Post Form the "for" fields of the labels are given the wrong value. So the output I expect is:

<div class="star-rating">
  <fieldset>
    <input type="radio" id="form-wpcf-review-experience5" name="wpcf-review-experience" value="5">
    <label for="form-wpcf-review-experience5">5</label>
    <input type="radio" id="form-wpcf-review-experience4" name="wpcf-review-experience" value="4">
    <label for="form-wpcf-review-experience4">4</label>
    <input type="radio" id="form-wpcf-review-experience3" name="wpcf-review-experience" value="3">
    <label for="form-wpcf-review-experience3">3</label>
    <input type="radio" id="form-wpcf-review-experience2" name="wpcf-review-experience" value="2">
    <label for="form-wpcf-review-experience2">2</label>
    <input type="radio" id="form-wpcf-review-experience1" name="wpcf-review-experience" value="1">
    <label for="form-wpcf-review-experience1">1</label>
  </fieldset>
</div>

The output I get is:

<div class="star-rating">
  <fieldset>
    <input type="radio" id="form-wpcf-review-experience5" name="wpcf-review-experience" value="5">
    <label for="form-wpcf-review-experience5">5</label>
    <input type="radio" id="form-wpcf-review-experience4" name="wpcf-review-experience" value="4">
    <label for="form-wpcf-review-experience5">4</label>
    <input type="radio" id="form-wpcf-review-experience3" name="wpcf-review-experience" value="3">
    <label for="form-wpcf-review-experience5">3</label>
    <input type="radio" id="form-wpcf-review-experience2" name="wpcf-review-experience" value="2">
    <label for="form-wpcf-review-experience5">2</label>
    <input type="radio" id="form-wpcf-review-experience1" name="wpcf-review-experience" value="1">
    <label for="form-wpcf-review-experience5">1</label>
  </fieldset>
</div>

i.e. all of the labels have the same "for" value which is pulled from the first label. This means that clicking in all numbers cause 5 to be selected.

Even if I hardcode it into the form it does the same. It only happens on forms - is this a bug? Anyway, I'm hoping you can help me to solve it this. Ideally I'd like to be able to select the format of the form output so I can choose how my radiobutton is coded, but if not then stopping it from changing my "for" values would be good.

Thanks
Tim

[Christian Cox]

Hello, this is unusual. I copied your shortcode PHP and placed it in my local environment. Then I added the following shortcode to a post Form on my site:

[rating_stars_shortcode field="wpcf-review-experience"]

I'm attaching a screenshot of the DOM and a screenshot of part of the actual page source as well. You can see the markup is numbered correctly in both cases so there must be something else I don't understand going on. Can you try these troubleshooting steps to help pinpoint the problem?
- Test with JavaScript deactivated in the browser. Is the label "for" attribute being changed by JS, or is the source wrong when the page is first served?
- Temporarily switch to a default theme like Twenty Nineteen and deactivate all plugins except Types, Views and Forms. If your shortcode is in the custom theme files, copy it into a new code snippet in Toolset > Settings > Custom Code so it can be used in this default setup.
- Test again.
- If the problem is resolved, reactivate your theme (deactivate the custom code snippet) and other plugins one by one until the problem returns.
- If the problem is not resolved, check to see if your server has any object caching or other server-side caching systems in place. Try flushing those caches.

[Tim Elliott]

Hi Christian,
Thanks for looking at this. I've followed your debugging steps.

First of all, when I deactivate js in the browser the stars work as they should, so it seems something is changing the html after the page loads.
After reactivating js in the browser:
Changing themes - no effect
Disabling all plugins - no effect
Clearing all server caches - no effect.

I've recreated the problem on a simple install with just Types, Views and Forms. Same thing happens whether with Divi or 2019.

Shall I provide you with access?

[Christian Cox]

Yes I believe that would be helpful, thank you. Please provide login credentials in the private reply fields here, and let me know where I can see the problem on the front-end of the site. I'll take a look and give you some additional feedback.

[Christian Cox]

Try removing the "form-group" class from the div surrounding the Review Experience section. This class is used by Forms to query form inputs and add accessibility IDs and "for" attributes to those inputs, but yours are breaking the replacement engine for some reason I can't quite understand. However, I can see that the "form-group" class is part of the input selector for that replacement, so remove that form-group class and test the results.

[Tim Elliott]

My issue is resolved now. Thank you!