Категория:
Опубликовано:

Как добавить атрибут к элементу формы

Часто возникает ситуация, когда нужно добавить определенный атрибут одному из элементов формы.

Нужно добавить класс или добавить событие (onclick, onkeyup, onsubmit...), или в HTML5 можно добавлять дополнительные атрибуты "data-".

В общем, смотрим как это сделать на примере формы поиска в стандартной теме "Bartik".

А делается все просто, с помощью стандартных средств Form API Drupal. Если быть точнее, с помощью ключа #attributes.

Для получения информации о форме и дальнейшей её модификации мы будем использовать hook_form_alter.

Нам понадобится установить и включить модуль Devel.

После, заходим в папку с нашей темой, находим там файл template.php и открываем его в редакторе и пишем в него следующую конструкцию:

/**
 * Implements hook_form_alter.
 */
function ИМЯ_ТЕМЫ_form_alter(&$form, $form_state, $form_id) {
  dpm($form);
}

Обязательно замените ИМЯ_ТЕМЫ на имя текущей темы!

Функция dpm() предоставляется модулем Devel, и позволяет вывести информацию о переменной в удобном виде, с помощью просмотрщика Krumo, в сообщении Drupal. С помощью неё мы получим информацию обо всех формах на странице.

Сохраняем и загружаем файл, сбрасываем кеш и переходим на страницу, где выводится форма поиска. Видим там примерно следующую картину:

Krumo

Это и есть Krumo.

Если форм на странице несколько, выведется столько же окон Krumo, в каждом информация об отдельной форме. В таком случае нужно найти нужную нам и работать с ней.

Открываем окно нажатием на заголовок:

ID формы

Смотрим элемент с ключом #form_id, его значение будет ID нужной нам формы (в нашем случае это "search_block_form"). Копируем его, и делаем проверку для этой формы:

function bartik_form_alter(&$form, $form_state, $form_id) {
  if($form['#form_id'] == 'search_block_form'){
    dpm($form);
  }
}

Теперь Krumo выведется только для нашей формы.

Ok. Теперь ищем нужное нам поле, у нас это "search_block_form", и для него прописываем нужные атрибуты. Давайте добавим несколько - класс, событие "onkeyup" и атрибут "data-name".

Согласно спецификациям Form API, значением атрибутов должен быть массив, в котором ключами будут атрибуты (названия), а их значениями будут вложенные массивы со значениями атрибутов. В нашем случае все это будет выглядеть так:

function bartik_form_alter(&$form, $form_state, $form_id) {
  if($form['#form_id'] == 'search_block_form'){
    $form['search_block_form']['#attributes'] = array(
      'class'     => array('my_class_1', 'my_class_2'),
      'onkeyup'   => array('this.value = this.value.replace(/[^0-9]/, \'\')'),
      'data-name' => array('Search field'),
    );
    dpm($form);
  }
}

Перезагружаем страницу, смотрим вкладку #attributes, и находим там добавленные значения:

Результат

Проверяем Firebug'ом:

Firebug

Все на месте.

После, не забываем удалить вывод Krumo!

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий