How to make form buttons call only javascript? I'm experimenting with JavaScript and Drupal forms. Currently I'm trying to make a button in the administration form of a module that will use JavaScript to append options to a select list. The problem I'm running into is that when I click the button, my JavaScript gets called but the whole form refresh. I've looked at the Forms API reference thinking there was some kind of attribute I can set on the button to stop it from but found nothing. Is there any way I can stop the button from refreshing the page or is this a dead end?

$form['#attached']['js'] = array(
  drupal_get_path('module', 'test').'/js/test.js',
);

$form['list'] = array(
  '#type' =&gt; 'select',
  '#options' =&gt; array(),
  '#attributes' =&gt; array(
    'name' =&gt; 'sellist',
  ),
  '#size' =&gt; 4,
);

$form['add_button'] = array(
  '#type' =&gt; 'button',
  '#value' =&gt; 'Add',
  '#attributes' =&gt; array(
    'onclick' =&gt; "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));
  }
}


My final code:

&lt;?php
function jstest_menu() {
  $items['admin/config/content/jstest'] = array(
    'title' =&gt; 'JavaScript Test',
      'description' =&gt; 'Configuration for Administration Test',
      'page callback' =&gt; 'drupal_get_form',
      'page arguments' =&gt; array('_jstest_form'),
      'access arguments' =&gt; array('access administration pages'),
      'type' =&gt; MENU_NORMAL_ITEM,
  );

  return $items;
}

function _jstest_form($form, &amp;$form_state) {
  $form['list'] = array(
    '#type' =&gt; 'select',
    '#options' =&gt; array(),
    '#size' =&gt; 4,
  );

  $form['text'] = array(
    '#type' =&gt; 'textfield',
  );

  $form['add_button'] = array (
    '#type' =&gt; 'button',
    '#value' =&gt; t("Add"),
    '#after_build' =&gt; array('_jstest_after_build'),
  );
  return $form;
}

function _jstest_after_build($form, &amp;$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));
the form button definition below works for me, the #after_build is useful for loading in javascript that can attach the click handler.

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

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


Then my javascript that is loaded in a separate file by the after build function, looks something like:

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