web-dev-qa-db-fra.com

Comment faire pour que les boutons du formulaire appellent uniquement le javascript?

J'expérimente avec JavaScript et les formulaires Drupal. Actuellement, j'essaie de créer un bouton dans le formulaire d'administration d'un module qui utilisera JavaScript pour ajouter des options à une liste de sélection. Le problème que je Je me heurte à ce que lorsque je clique sur le bouton, mon JavaScript est appelé mais l'ensemble du formulaire est actualisé. J'ai regardé la référence de l'API Forms en pensant qu'il y avait une sorte d'attribut que je peux définir sur le bouton pour l'arrêter, mais j'ai trouvé est-il possible d'arrêter le bouton de rafraîchir la page ou est-ce une impasse?

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

Mon code final:

<?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));
7formsjavascript
9
Sathariel

Le moyen le plus simple d'y parvenir est de renvoyer false dans votre code 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;
  }
}

ou mieux utilise des comportements:

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

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

la définition du bouton de formulaire ci-dessous fonctionne pour moi, le #after_build est utile pour le chargement en javascript qui peut attacher le gestionnaire de clics.

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

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

Ensuite, mon javascript qui est chargé dans un fichier séparé par la fonction after build, ressemble à quelque chose comme:

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

Vous pouvez simplement ajouter le return false instruction après votre appel de fonction, à l'intérieur de la ligne d'attribut de l'élément de formulaire bouton:

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

Idéalement, lisez les propres capacités de Drupal AJAX (ou AHAH). Intro vraiment basique ici http://drupal.org/node/752056

Sinon, je suis surpris qu'il rafraîchisse la page car ce n'est qu'un "bouton" et non une soumission ou quoi que ce soit.

A-t-il besoin du javascript pour retourner false, comme sur un lien pour l'empêcher de revenir en haut de la page?

0
joevallender