Я экспериментирую с формами JavaScript и Drupal. В настоящее время я пытаюсь сделать кнопку в форме администрирования модуля, который будет использовать JavaScript для добавления параметров в список выбора. Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку, вызывается мой JavaScript, но обновляется вся форма. Я посмотрел на справочник по API форм, думая, что есть какой-то атрибут, который я могу установить на кнопке, чтобы остановить его, но ничего не нашел. Можно ли как-то помешать кнопке обновить страницу или это тупик?
$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));
}
}
Мой окончательный код:
<?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));