1

I'm trying to use hook_form_FORM_ID_alter to add a CSS class to one of the select element.

I'm trying to add a CSS class "form-control", to the <select id="edit-shs-term-node-tid-depth-select-1">'s class.

I have added it and even performed drush cc all, but still nothing was added to the class of select.

HTML

 <form action="/properties" method="get" id= "views-exposed-form-view-property-page-master" accept-charset="UTF-8" class= "jquery-once-1-processed"> <div> <div class="views-exposed-form"> <div class="views-exposed-widgets clearfix"> <div id="edit-title-wrapper" class= "views-exposed-widget views-widget-filter-title"> <label for="edit-title">Search</label> <div class="views-widget"> <div class="form-type-textfield form-item-title form-item form-group"> <input class="form-control form-text" type="text" id="edit-title" name= "title" value="" size="30" maxlength="128" /> </div> </div> </div> <div id="edit-field-developer2-tid-wrapper" class= "views-exposed-widget views-widget-filter-field_developer2_tid"> <label for="edit-field-developer2-tid">Developer</label> <div class="views-widget"> <div class= "form-type-select form-item-field-developer2-tid form-item form-group"> <select class="form-control form-select" id="edit-field-developer2-tid" name="field_developer2_tid"> <option value="All" selected="selected"> - Any - </option> </select> </div> </div> </div> <div id="edit-shs-term-node-tid-depth-wrapper" class= "views-exposed-widget views-widget-filter-shs_term_node_tid_depth"> <label for="edit-shs-term-node-tid-depth">Location</label> <div class="views-widget"> <div class= "form-type-textfield form-item-shs-term-node-tid-depth form-item form-group shs-wrapper-processed"> <input class= "element-invisible shs-enabled form-control form-text shs-processed" type="text" id="edit-shs-term-node-tid-depth" name= "shs_term_node_tid_depth" value="All" size="60" maxlength="128" /> <select id="edit-shs-term-node-tid-depth-select-1" class= "shs-select form-select shs-select-level-1" style= "display: inline-block;"> <option value="0"> - None - </option> </select> </div> </div> </div> <div id="edit-field-property-type-tid-wrapper" class= "views-exposed-widget views-widget-filter-field_property_type_tid"> <label for="edit-field-property-type-tid">Property Type</label> <div class="views-widget"> <div class= "form-type-select form-item-field-property-type-tid form-item form-group"> <select class="form-control form-select" id= "edit-field-property-type-tid" name="field_property_type_tid"> <option value="All" selected="selected"> - Any - </option> </select> </div> </div> </div> <div class="views-exposed-widget views-submit-button"> <button class="btn btn-info form-submit" id="edit-submit-view-property" name= "" value="Apply" type="submit">Apply</button> </div> </div> </div> </div> </form>

template.php

/* * implements hook_form_FORM_ID_alter * */ function directbootstrap_form_views_exposed_form_view_property_page_master_alter(&$form, &$form_state, $form_id) { $form['shs_term_node_tid_depth']['#attributes'][] = array('class' => array('form-control')); }

EDIT

I have updated my question,

What I'm trying to accomplish is insert a class 'form-control' on to the hierarchical select. But after inserting dpm($form); inside the function. All I can find is the array for the element shs_term_node_tid_depth but not the <select> itself.

here is my template.php

/** * implementation of hook_form_FORM_ID_alter() */ function directbootstrap_form_views_exposed_form_alter(&$form, &$form_state, $form_id) { if ($form['#id'] == 'views-exposed-form-view-property-page-master')) { $form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control'; } }
Improve this question

2 Answers 2

Reset to default
3

You need:

$form['shs_term_node_tid_depth']['#attributes'] = array('class' => array('form-control'));

or more succinct version:

$form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control';
Improve this answer
2
  • I tried it but I don't think it worked, tested by changing 'form-control' into 'test-class' no change was reflected. And also I was not trying to insert it to the ` <input name="shs_term_node_tid_depth"/>. Instead I want to add class to the <input class="element-invisible shs-enabled form-control form-text shs-processed" type="text" id="edit-shs-term-node-tid-depth" name="shs_term_node_tid_depth" value="All" size="60" maxlength="128" />` Commented Apr 11, 2014 at 15:58
  • 3
    Small note - the second one should always be preferred (so you don't wind up removing attributes that another module might have added). This is only half the story though, the form alter isn't even being invoked at the moment Commented Apr 11, 2014 at 17:40
1

Views exposed forms are...fun. For example, the form ID you get will always be views_exposed_form, regardless of the ID you see in HTML or anywhere else. So currently your form alter function isn't named quite right.

You need to alter the form by its correct ID on the PHP side, and grab the context from something else in the form, maybe the html ID itself.

So, a rudimentary version of what you're looking for would be

function MYMODULE_form_views_exposed_form_alter(&$form, &$form_state, $form_id) { if ($form['#id'] == 'views-exposed-form-view-property-page-master')) { $form['shs_term_node_tid_depth']['#attributes']['class'][] = 'form-control'; } }

Remember to clear the caches after you've changed the function name.

Improve this answer
4
  • Thanks @Clive, for pointing that out. I remember reading somewhere here on using hook_form_FORM_ID_alter with Views. But what the element I'm trying to add the class into is the <select id='edit-shs-term-node-tid-depth-select-1'>. Does this mean I can do something like $form['edit-shs-term-node-tid-depth-select-1']['#attributes']['class'][] = 'form-control';? Commented Apr 11, 2014 at 17:46
  • You can't reference the server side elements by their HTML ID, no...do you have the Devel module installed? If not, get it immediately, and once installed use dpm($form); in the alter function. That will show you both that the alter function is definitely being called (an obvious requirement for anything to happen), and will print a nice pretty representation of the $form array to the messages area on screen. From there you can easily see the exact array key of the element you're trying to override. In the case of more complex elements like SHS, though, it might be more complicated... Commented Apr 11, 2014 at 17:58
  • ...see how you get on with that method first, and if you still get nowhere just update the question and ping me to have a look Commented Apr 11, 2014 at 17:58
  • I have made an update to my question. Commented Apr 12, 2014 at 7:13

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.