Làm thế nào để tạo các nút biểu mẫu chỉ gọi javascript?

Tôi đang thử nghiệm các hình thức JavaScript và Drupal. Hiện tại tôi đang cố gắng tạo một nút ở dạng quản trị của mô-đun sẽ sử dụng JavaScript để nối các tùy chọn vào danh sách đã chọn. Vấn đề tôi gặp phải là khi tôi nhấp vào nút, JavaScript của tôi được gọi nhưng làm mới toàn bộ biểu mẫu. Tôi đã xem xét tham chiếu API Forms có một số loại thuộc tính tôi có thể đặt trên nút để ngăn chặn nhưng không tìm thấy gì. Có cách nào để tôi có thể ngăn nút làm mới trang hay đây là một ngõ cụt?

$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));
  }
}

Mã cuối cùng của tôi:

<?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));

Cách dễ nhất để thực hiện việc này chỉ là trả về false trong mã javascript của bạn:

function add_to_list(list, text) {
  try {
    list.add(new Option(text, list.length), null);
    return false;
  } catch(e) {
    list.add(new Option(text, list.length));   
    return false;
  }
}

hoặc cách tốt hơn là sử dụng các hành vi:

Drupal.behaviors.some_action = function(context) {
  $('#id-button:not(.button-processed)',context)
  .addClass('button-processed').each(function() {

    //whatever you want here
    return false;
  });
}

định nghĩa nút biểu mẫu bên dưới hoạt động với tôi, #after_build rất hữu ích để tải trong javascript có thể đính kèm trình xử lý nhấp chuột.

$form['add_button'] = array (
  '#type' => 'button',
  '#attributes' => array('onclick' => 'return (false);'),
  '#value' => t("Add"),
);

$form['#after_build'] = array('[module_name]_after_build');

Sau đó, javascript của tôi được tải trong một tệp riêng biệt bởi hàm sau khi xây dựng, trông giống như:

Drupal.behaviors.[module_name] = function(context) {
  $('#edit-add-button').click(function() {
   ...Do something here
  });
};

Bạn chỉ có thể thêm return falsecâu lệnh sau khi gọi hàm, bên trong dòng thuộc tính của phần tử dạng nút:

'#attributes' => array(
   'onclick' => "add_to_list(this.form.sellist, 'Append' + this.form.sellist.length); return false",
),

Lý tưởng nhất là đọc các khả năng hình thức AJAX (hoặc AHAH) của Drupal. Giới thiệu thực sự cơ bản ở đây http://drupal.org/node/752056

Mặt khác, tôi ngạc nhiên khi nó làm mới trang vì nó chỉ là một 'nút' chứ không phải là một bài nộp hay bất cứ điều gì.

Có cần javascript để trả về false, giống như trên một liên kết để ngăn chặn nó nhảy trở lại đầu trang không?