Nous allons voir dans cet article comment faire pour accéder aux valeurs des éléments d’un formulaire en utilisant JavaScript. La méthode getFormData nous permettra de récupérer à partir d’un formulaire fourni tous les champs renseignés, dans notre cas input, textarea et select.

On peut également autoriser plus d’éléments et par la même occasion exclure certains inputs ayant pour type button, reset, submit qui ne seront peut être pas essentiels lors de notre traitement. Cette méthode peut s’avérer utile pour l’envoi de données d’un formulaire au clic par exemple.

const getFormData = form => {
  if (!form || form.tagName !== "FORM") {
    return;
  }

  const { elements } = form;
  // objet des données qu'on va récupérer
  const data = {};
  // les tags HTML qu'on souhaite récupérer
  const allowedTags = ["INPUT", "TEXTAREA", "SELECT"];
  // les types de inputs qu'on ne prend pas en compte
  const excludedInputTypes = ["button", "reset", "submit"];

  // [].slice.call() servira à convertir elements de type HTMLFormControlsCollection à un tableau
  [].slice
    .call(elements)
    .filter(
      node =>
        // on récupère le tag seulement si il est contenu dans allowedTags
        // et si son name a une valeur
        allowedTags.indexOf(node.tagName) !== -1 && node.name
    )
    .forEach(node => {
      // dans le cas d'un input
      if (
        node.tagName === "INPUT" &&
        excludedInputTypes.indexOf(node.type) === -1
      ) {
        if (
          (node.type !== "radio" && node.type !== "checkbox") ||
          (node.type === "radio" && node.checked)
        ) {
          data[node.name] = node.value;
        }
        if (node.type === "checkbox") {
          data[node.name] = node.checked;
        }
      }

      // dans le cas d'un textarea
      if (node.tagName === "TEXTAREA") {
        data[node.name] = node.value;
      }

      // dans le cas d'un select avec options
      if (node.tagName === "SELECT") {
        const hasOption =
          node.options.length && node.options[node.selectedIndex];
        data[node.name] = hasOption
          ? node.options[node.selectedIndex].value
          : "";
      }
    });
  return data;
};

// admettons qu'on ait un formulaire qui a pour id #my-form
const myForm = document.getElementById("my-form");
console.log(getFormData(myForm));

Avant de partir…
Merci pour votre lecture ! 😊