Estoy experimentando con JavaScript y formularios Drupal. Actualmente estoy tratando de hacer un botón en la forma de administración de un módulo que usará JavaScript para agregar opciones a una lista de selección. El problema con el que me encuentro es que cuando hago clic en el botón, se llama a mi JavaScript pero se actualiza todo el formulario. Miré la referencia de Forms API pensando que había algún tipo de atributo que puedo configurar en el botón para detenerlo, pero no encontré nada. ¿Hay alguna forma de evitar que el botón actualice la página o es un callejón sin salida?
$form['#attached']['js'] = array(
drupal_get_path('module', 'test').'/js/test.js',
);
$form['list'] = array(
'#type' => 'select',
'#options' => array(),
'#attributes' => array(
'name' => 'sellist',
),
'#size' => 4,
);
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'Add',
'#attributes' => array(
'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length);",
),
);
//JavaScript
function add_to_list(list, text) {
try {
list.add(new Option(text, list.length), null) //add new option to end of "sample"
}
catch(e) {
list.add(new Option(text, list.length));
}
}
Mi codigo final:
<?php
function jstest_menu() {
$items['admin/config/content/jstest'] = array(
'title' => 'JavaScript Test',
'description' => 'Configuration for Administration Test',
'page callback' => 'drupal_get_form',
'page arguments' => array('_jstest_form'),
'access arguments' => array('access administration pages'),
'type' => MENU_NORMAL_ITEM,
);
return $items;
}
function _jstest_form($form, &$form_state) {
$form['list'] = array(
'#type' => 'select',
'#options' => array(),
'#size' => 4,
);
$form['text'] = array(
'#type' => 'textfield',
);
$form['add_button'] = array (
'#type' => 'button',
'#value' => t("Add"),
'#after_build' => array('_jstest_after_build'),
);
return $form;
}
function _jstest_after_build($form, &$form_state) {
drupal_add_js(drupal_get_path('module', 'jstest').'/js/jstest.js');
return $form;
}
JavaScript
(function ($) {
Drupal.behaviors.snmpModule = {
attach: function (context, settings) {
$('#edit-add-button', context).click(function () {
var list = document.getElementById('edit-list');
var text = document.getElementById('edit-text');
if (text.value != '')
{
try {
list.add(new Option(text.value, list.length), null);
}
catch(e) {
list.add(new Option(text.value, list.length));
}
text.value = '';
}
return false;
});
$('#edit-list', context).click(function () {
var list = document.getElementById('edit-list');
if (list.selectedIndex != -1)
list.remove(list.selectedIndex);
return false;
});
}
};
}(jQuery));