양식 버튼을 자바 스크립트로만 호출하는 방법은 무엇입니까?

JavaScript 및 Drupal 양식을 실험하고 있습니다. 현재 JavaScript를 사용하여 선택 목록에 옵션을 추가하는 모듈의 관리 양식으로 버튼을 만들려고합니다. 내가 겪고있는 문제는 버튼을 클릭하면 JavaScript가 호출되지만 전체 양식이 새로 고쳐진다는 것입니다. 버튼에서 중지 할 수있는 속성이 있지만 아무것도 발견하지 못한다고 생각하는 Forms 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));

이것을 달성하는 가장 쉬운 방법은 자바 스크립트 코드에서 false를 반환하는 것입니다.

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

또는 더 나은 방법은 행동을 사용하는 것입니다.

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

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

아래의 양식 버튼 정의는 저에게 효과적이며 #after_build는 클릭 핸들러를 첨부 할 수있는 자바 스크립트로로드하는 데 유용합니다.

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

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

그런 다음 after build 함수에 의해 별도의 파일에로드 된 내 자바 스크립트는 다음과 같습니다.

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

return false버튼 양식 요소의 속성 줄 안에 함수 호출 후 명령문을 추가 할 수 있습니다 .

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

이상적으로 Drupal의 자체 AJAX (또는 AHAH) 양식 기능을 읽어보십시오. 정말 기본적인 소개는 여기 http://drupal.org/node/752056

그렇지 않으면 제출이나 다른 것이 아닌 '버튼'이므로 페이지를 새로 고치는 것이 놀랍습니다.

링크가 페이지 맨 위로 이동하는 것을 막는 것처럼 자바 스크립트가 false를 반환해야합니까?