Como agregar eventos a un textfield en Drupal 7

Algunas veces deseamos agregar evento a los texfield de nuestros formularios, como son onblur y onmouseup entre otros, a continuación les mostrare la forma de hacerlo.

1. Agregar atributos.

La propiedad #attributes de los elemento de FAPI permite agregar cualquier cosa a los elementos y es comúnmente usado para agregar clases de CSS personalizadas. Pero nada impide que agregamos elementos de js como el onblur como se puede apreciar a continuación.

$form['quantity'] = array(
  '#type' => 'textfield',
  '#name' => 'quantity',
  '#id' => 'quantity',
  '#size' => 20,
  '#attributes' => array(
    'onblur' => "product_set_subtotal(this);",
  );

Como se puede apreciar lo que se hace es definir que la propiedad onblur se le indicar que función de javascript deseamos que se ejecute, le pasamos el this como parámetros para indicar que el objeto que hace el trigger del evento se debe pasar como parámetro.

2. Agregar archivo de javascript.

Para que nuestra lógica funcione tenemos que agregar el archivo de JS donde se encuentra la función de ejecutara el evento onblur.

drupal_add_js(drupal_get_path('module', 'MIMODULO') .'/js/mimodulo.js', 'file');

En el ejemplo se agrega un archivo que esta dentro del la carpeta del módulo MIMODULO y dentro de una subcarpeta llamada js y el archivo que se desea cargar ese llama mimodulo.js.

3. Definir función de javascript.

Luego de cargar el archivo que contiene la función, obviamente debemos definir la función. A continuación se muestra una función que actualiza otro textfield usando un calculo arbitrario.

function product_set_subtotal(input) {
  var quantity = jQuery(input).val();
  var lid = jQuery(input).attr('id').split('quantity_');
  var price = jQuery('#price_' + lid[1]).val();
  var subtotal = new Number(price*quantity);
  jQuery('#subtotal_' + lid[1]).val(subtotal.toFixed(2));

}

Espero que haya sido de su agrado.