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';
  }
}
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';
  • 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" />` – lozadaOmr Apr 11 '14 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 – Clive Apr 11 '14 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.

  • 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';? – lozadaOmr Apr 11 '14 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... – Clive Apr 11 '14 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 – Clive Apr 11 '14 at 17:58
  • I have made an update to my question. – lozadaOmr Apr 12 '14 at 7:13

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.