Question

I’m using this method to pass a default value to a Contact Form 7 select field. It’s working fine, but I really need it to work with a radio field.

I’ve tried changing the jquery to:

jQuery(document).ready(function(){
        // get contents of hidden input; store in variable
        var val = jQuery("span.hiddendefault input").val();
        // set the "selected" attribute for option with value equal to variable
        jQuery('radio#style-one option[value=' + val + ']').attr('checked', 'checked');
});

and Contact Form 7 to:

[radio radio-525 id:style-one class:test-class "one" "two" "three" "four"] 

but the radio button isn’t being checked as required. Does anyone have any ideas, please?

[EDIT] Form’s generated html:

<span class="wpcf7-form-control-wrap radio-525">
  <span id="style-one" class="wpcf7-form-control  wpcf7-radio test-class">
    <span class="wpcf7-list-item">
      <input type="radio" name="radio-525" value="one" />
      <span class="wpcf7-list-item-label">one</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="radio" name="radio-525" value="two" />
      <span class="wpcf7-list-item-label">two</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="radio" name="radio-525" value="three" />
      <span class="wpcf7-list-item-label">three</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="radio" name="radio-525" value="four" />&nbsp;
      <span class="wpcf7-list-item-label">four</span>
    </span>
  </span>
</span>
<span class="wpcf7-form-control-wrap hiddendefault">
  <input type="hidden" name="hiddendefault" value="three" />
</span>

Answer 1

The HTML being generated by Contact Form 7 does not use radio or option tags. It is using input type="radio" inside a span instead. As a result, your selector doesn’t match any elements. It should be

'span#style-one input[value=' + val + ']'

in context

jQuery(document).ready(function(){
    // get contents of hidden input; store in variable
    var val = jQuery("span.hiddendefault input").val();
    // set the "selected" attribute for option with value equal to variable
    jQuery('span#style-one input[value=' + val + ']').attr('checked', 'checked');
});