Как заставить кнопки формы вызывать только javascript?


9

Я экспериментирую с формами 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));

Ответы:


4

Самый простой способ сделать это - просто вернуть false в коде JavaScript:

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

1
Спасибо, что указали мне на поведение, я читаю это прямо сейчас. И по некоторым причинам возвращение false не работает для меня; страница все еще обновляется = /. В качестве дополнительного вопроса, как вы должны обращаться с пользователями, которые блокируют / отключают JavaScript?
Сатариэль

Если вы поместите кнопку вне тега <form> </ form>, она не будет отправлена, но это не рекомендуется, более обычный способ сделать это с помощью javascript. Если вы все еще обновляете форму, проверьте, есть ли какой-либо другой javascript, отображающий ошибку или что-то в этом роде.
Gnuget

Где разместить код Drupal.Behaviors? в файле JavaScript?

Да, посмотрите на это: amazeelabs.com/en/blog/drupal-behaviors-quick-how
Gnuget

7

приведенное ниже определение кнопки формы работает для меня, #after_build полезен для загрузки в javascript, который может прикрепить обработчик кликов.

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

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

Тогда мой javascript, который загружается в отдельный файл функцией после сборки, выглядит примерно так:

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

After_build не работает для меня. Это приводит к фатальной ошибке: вызов неопределенной функции [имя_модуля] _after_build (). Если я определю метод [module_name] _after_build () с пустым телом, форма не будет отображаться. Можете ли вы уточнить немного больше, как его использовать?
суманчалки

Извините, я не видел этот вопрос ... Я полагаю, вы заменяете [module_name] реальным именем вашего модуля?
Малкс

$ form ['# after_build'] предназначен для добавления функции на стороне сервера (PHP) - он не предназначен для определения javascript после сборки. api.drupal.org/api/drupal/…
Кристиан

3

Вы можете просто добавить return falseоператор после вызова функции внутри строки атрибута элемента формы кнопки:

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

Я думаю, что лучшим вариантом является добавление внешнего прослушивателя событий, а не помещение всего этого во встроенное событие onclick.
Кристиан

0

В идеале, прочитайте собственные способности AJAX (или AHAH) в Drupal. Действительно базовое введение здесь http://drupal.org/node/752056

В противном случае, я удивляюсь, что это обновляет страницу, поскольку это просто «кнопка», а не отправка или что-то еще.

Нужен ли ему javascript для возврата false, как в случае со ссылкой, чтобы он не перескочил на верх страницы?


На самом деле я пытался избегать использования AJAX, так как то, что я пытаюсь сделать, в основном на стороне клиента. Пока форма не будет отправлена, серверу нужны данные. Что касается возврата вещей в JavaScript, я пытался вернуть true, false и null без разницы.
Сатариэль
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.