Hi,

I have a set of radio buttons with links on the labels. The link just plays an mp3, thus the user stays on the page.

<div id="edit-quest-1" class="form-radios"><div class="form-item form-type-radio form-item-question-1">  <input
 type="radio" id="edit-question-1-5" name="question_1" value="5"
 class="form-radio">  <label class="option"
 for="edit-question-1-5">Option without link on label</label>

 </div> <div class="form-item form-type-radio form-item-question-1"> 
 <input type="radio" id="edit-question-1-4" name="question_1" value="4"
 class="form-radio">  <label class="option" for="edit-question-1-4"><a
 class="sm2_link" href="/sites/default/files/sample2.mp3">Option 2</a>
 </label>

 </div> <div class="form-item form-type-radio form-item-question-1"> 
 <input type="radio" id="edit-question-1-12" name="question_1"
 value="12" class="form-radio">  <label class="option"
 for="edit-question-1-12"><a class="sm2_link"
 href="/sites/default/files/sample3.mp3">Option 3</label> 
</div>

If I click on the first label without the link the check box of the radio gets selected as it should. However if I click on the second or third options, the ones that have links to mp3 files, then it will play my sound but would not select the radiobutton corresponding to the label.

How can I select the radio button when the user clicks on the label trying to listen to the mp3? To ask the same question in different words. How can I click on the labels Option 2 and Option 3 and play the sound, and that at the same time the corresponding radio button gets selected.

Many thanks

Comments

John_B’s picture

Put the a tags outside the label tags instead of inside.
The third a tag in the HTML you posted is also lacking a closing tag.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors