0

I'm looking to insert some extra html before an input radio button. This is my html now:

<div id="edit-field-geslacht-und" class="form-radios">
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-female" name="field_geslacht[und]" value="female" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-female">Female</label>
    </div>
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-male" name="field_geslacht[und]" value="male" checked="checked" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-male">Male</label>
    </div>
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-other" name="field_geslacht[und]" value="other" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-other">Other (transgender...)</label>
    </div>
</div>

Now I would like to add the following html before every radio input:

<span class="radio" style="background-position: 0px -28px;"></span>

But how can I do this?

UPDATE:

I've tried to do it with theme_form_element function and now have this:

function theme_form_element($variables)
{
    if($variables['element']['#type'] == 'radio')
    {
        dump($variables);
    }
}

My dump shows me this array:

array (size=1)
  'element' => 
    array (size=27)
      '#type' => string 'radio' (length=5)
      '#title' => string 'Female' (length=6)
      '#return_value' => string 'female' (length=6)
      '#default_value' => string 'male' (length=4)
      '#attributes' => 
        array (size=0)
          empty
      '#parents' => 
        array (size=2)
          0 => string 'field_geslacht' (length=14)
          1 => string 'und' (length=3)
      '#id' => string 'edit-field-geslacht-und-female' (length=30)
      '#ajax' => null
      '#weight' => float 0.001
      '#input' => boolean true
      '#process' => 
        array (size=1)
          0 => string 'ajax_process_form' (length=17)
      '#theme' => string 'radio' (length=5)
      '#theme_wrappers' => 
        array (size=1)
          0 => string 'form_element' (length=12)
      '#title_display' => string 'after' (length=5)
      '#pre_render' => 
        array (size=1)
          0 => string 'ctools_dependent_pre_render' (length=27)
      '#after_build' => 
        array (size=1)
          0 => string 'conditional_fields_element_after_build' (length=38)
      '#defaults_loaded' => boolean true
      '#tree' => boolean true
      '#array_parents' => 
        array (size=3)
          0 => string 'field_geslacht' (length=14)
          1 => string 'und' (length=3)
          2 => string 'female' (length=6)
      '#processed' => boolean true
      '#required' => boolean false
      '#name' => string 'field_geslacht[und]' (length=19)
      '#value' => string 'male' (length=4)
      '#ajax_processed' => boolean false
      '#sorted' => boolean true
      '#after_build_done' => boolean true
      '#children' => string '<input type="radio" id="edit-field-geslacht-und-female" name="field_geslacht[und]" value="female" class="form-radio" />' (length=119)

I've tried to change the #children variable and add my html before it. But when I do that no element on my page is showing ... .

1

You can override the theme_radio function in your own theme :

function mytheme_radio($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'radio';
  element_set_attributes($element, array('id', 'name','#return_value' => 'value'));

  if (isset($element['#return_value']) && $element['#value'] !== FALSE && $element['#value'] == $element['#return_value']) {
    $element['#attributes']['checked'] = 'checked';
  }
  _form_set_class($element, array('form-radio'));

  if ($its_my_field) {
     return '<span class="radio" style="background-position: 0px -28px;"></span><input' . drupal_attributes($element['#attributes']) . ' />';
  }
  else {
     return '</span><input' . drupal_attributes($element['#attributes']) . ' />';
  }

Maybe try with the more generic function theme_form_element.

Make sure to add conditions to only affect the form or the element you need like in the example written above.

3
  • I've tried to do it with theme_form_element but didn't work, updated my topic. Could you take a look,
    – nielsv
    Jun 26 '14 at 10:36
  • Can you give me the entire code of your theme_form_element function please ?
    – pbonnefoi
    Jun 26 '14 at 12:26
  • You should have something like this : $output .= ' ' . $prefix . '<span class="radio" style="background-position: 0px -28px;"></span>' . $element['#children'] . $suffix . "\n"; and return $output at the end of your function.
    – pbonnefoi
    Jun 26 '14 at 12:30
0

You can use jQuery selector -

    <html>
    <head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
    jQuery(document).ready(function() {     
jQuery( "input[type=radio]" ).before( '<span class="radio" style="background-position: 0px -28px;"></span>' );
});    
</script></head>
<body>
<div id="edit-field-geslacht-und" class="form-radios">
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-female" name="field_geslacht[und]" value="female" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-female">Female</label>
    </div>
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-male" name="field_geslacht[und]" value="male" checked="checked" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-male">Male</label>
    </div>
    <div class="form-item form-type-radio form-item-field-geslacht-und">
        <input type="radio" id="edit-field-geslacht-und-other" name="field_geslacht[und]" value="other" class="form-radio">  
        <label class="option" for="edit-field-geslacht-und-other">Other (transgender...)</label>
    </div>
</div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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