Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Need some assistance to dynamically generate IDs for a group of radio buttons in Contact Form 7.

Example:

<span class="wpcf7-list-item">
<label id="test01">
<input type="radio" name="test" value="Test">&nbsp;
<span class="wpcf7-list-item-label">Test</span>
</label>
</span>
<span class="wpcf7-list-item">
<label id="test02">
<input type="radio" name="test2" value="Test2">&nbsp;
<span class="wpcf7-list-item-label">Test</span>
</label>
</span>

Thanks!

share|improve this question
    
First, can I ask why you need an ID per radio button? –  cmegown May 29 '12 at 19:24
    
We require the ability to add individual styling on the label of each radio button, basically icons. –  Barry May 30 '12 at 9:06
    
Gotcha, I'll draft an answer. You can do this with CSS. –  cmegown May 30 '12 at 14:06
add comment

1 Answer 1

This is not tested, but should work.

There is a + CSS selector that you can use in conjunction with HTML elements and CSS classes and ID's. I'd suggest you do something similar to this to avoid all the hassle of figuring out a way to inject an ID into each radio button:

/* selects the first label element related to the first radio button,
 * the '+' part selects only the element that comes IMMEDIATELY after
 * the previously stated selector. The ':before' pseudo-class will allow
 * you to inject an image before the content.
 */
#test01+input:before {
    /* something similar to this */
    content: url('image.jpg');
}

I would check out this article, which should be a more detailed walkthrough of everything you need for this. Alternatively - you could use jQuery, which should work something like this:

$('#test01+input').attr('id', 'your-id-value');

Again, this is untested, but this should allow you to dynamically add an ID attribute to any of those elements, which you can then manipulate with CSS. I don't know if this will solve your problem or not, but hopefully it gets the wheels turning :)

share|improve this answer
    
Thanks for the suggestion but it won't cut the mustard. We require a hover state. –  Barry May 30 '12 at 15:34
    
Edited answer to include jQuery way of doing it. –  cmegown May 30 '12 at 16:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.