web-dev-qa-db-fra.com

Comment ajouter un bouton à un formulaire qui appelle JavaScript personnalisé lorsque vous cliquez dessus?

Je veux créer un bouton sur un formulaire qui, lorsque vous cliquez dessus:

  1. Appelle du JavaScript personnalisé
  2. Ne soumet pas le formulaire

Est-ce possible avec Drupal 8 formulaires)?

8formsjavascript
4
Mudassar Ali

Dans cet exemple, j'ai ajouté une action de bouton personnalisé à un formulaire Drupal 8. Lorsque vous cliquez sur le bouton, il empêche le formulaire d'être soumis et permet à JavaScript personnalisé d'effectuer un travail.

Voici les 3 pièces:

  1. L'élément bouton de formulaire, avec un #attached bibliothèque
  2. Déclaration de bibliothèque de votre module personnalisé
  3. .js fichier

Et voici l'exemple de code:

dans ExampleForm.php

$form['actions']['clear'] = [
  '#type' => 'button',
  '#value' => $this->t('Clear'),
  '#attributes' => [
    'onclick' => 'return false;'
  ],
  '#attached' => array(
    'library' => array(
      'example/foo',
    ),
  ),
];

example.libraries.yml

foo:
  js:
    js/foo.js: {}

js/foo.js

Drupal.behaviors.example_hello = {
  attach: function (context, settings) {

    // Attach a click listener to the clear button.
    var clearBtn = document.getElementById('edit-clear');
    clearBtn.addEventListener('click', function() {

        // Do something!
        console.log('Clear button clicked!');

    }, false);

  }
};

N'oubliez pas d'effacer tous vos caches pour vous assurer que votre nouveau foo.js la bibliothèque est récupérée par Drupal 8.

4
tyler.frankenstein

Définissez le bouton_type sur bouton:

$form['js_action'] = array(
  '#type' => 'button', 
  '#value' => t('Click me'), 
);

JS personnalisé que vous souhaitez attacher, comme:

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

Invoquer ajax ressemble à ceci:

$form['js_action']['#ajax'] => array(
  'callback' => 'poll_choice_js',
  'wrapper' => 'poll-choices',
  'method' => 'replace',
  'effect' => 'fade',
),

Avec un rappel de menu comme celui-ci:

/**
 * Menu callback for AJAX additions. Render the new poll choices.
 */
function poll_choice_js($form, $form_state) {
  return $form['choice_wrapper']['choice'];
}

Consultez l'API pour plus d'informations ..

4
rémy

Définir button_type sur 'button' ne changera pas l'attribut 'type' de la balise résultante, ajoutera juste une classe. Il n'y a aucun moyen de créer un bouton de type autre que "soumettre" si vous utilisez des éléments de formulaire "bouton" ou "soumettre". Vous pouvez toujours joindre un javascript qui empêche le comportement par défaut d'un tel bouton, mais je ne le recommanderais pas.

Ma façon préférée est de créer un bouton dédié au moyen de l'élément html_tag à usage général:

$element['nosubmit_button'] = [
  '#type' => 'html_tag',
  '#tag' => 'input',
  '#attributes' => [
    'type' => 'button',
    'value' => t("It won't trigger submit"),
    'class' => 'button',
    'name' => 'nosubmit_button',
  ],
  '#attached' => [
    'library' => [
      'mylibrary',
    ],
  ],

Veuillez également noter que dans Drupal 8, vous devez attacher des bibliothèques, pas des fichiers js ou css individuels.

Il existe d'autres façons d'atteindre le même objectif, par exemple, vous pouvez utiliser le type d'élément "balisage" et fournir le balisage html souhaité du bouton en tant que propriété "# markup". Faites également attention à la propriété #allowed_tags, car le balisage est filtré et aucune balise ne passera par défaut (par exemple, la balise button ne le sera pas).

3
gease