Je souhaite créer une application simple avec JS qui identifie les champs du formulaire qui comprend l'identifiant du champ et son texte correspondant.

Par exemple, pour le site suivant: https://freeditorial.com/en/register

entrez la description de l'image ici Je veux pour chaque zone de texte l'identifiant et le texte. Pour le premier, ce sera:

texte: Email
id: "user_email"

Je peux le faire avec le code suivant:

form = document.getElementsByClassName("control-group")
form[0].innerText
form[0].querySelector("input").id

Le problème est que cela dépend du nom de la classe, qui peut changer pour chaque site. Existe-t-il un moyen d'obtenir ces mêmes données à partir du formulaire?

J'essaie avec:

var site_forms =  document.forms

Si je vérifie le texte du formulaire, toutes les données semblent être là:

site_forms[0].innerText

C'est un segment de celui-ci:

<input id="user_role_ids" name="user[role_ids]" type="hidden" value="2">
<div class="control-group">
  <label for="user_email">Email</label>
  <div class="controls">
    <input type="text" value="" name="user[email]" id="user_email">
  </div>
</div>
<span id="erroremail" class="rightCol error"></span>
<div class="control-group">
  <label for="user_name">Name</label>
  <div class="controls">
    <input id="user_name" name="user[name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_last_name">Last Name</label>
  <div class="controls">
    <input id="user_last_name" name="user[last_name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_username">Name by which you publish</label>
  <div class="controls">
    <input type="text" value="" name="user[username]" id="user_username">
  </div>
</div>
<div class="control-group">
  <label for="user_country_code">Country</label>
  <div class="controls">
  <select id="user_country_id" name="user[country_id]">
    <option value="">Country</option>
    <option value="3">Afghanistan</option>
    <option value="6">Albania</option>

Mais je ne trouve pas de moyen fiable de l'extraire.

0
Luis Ramon Ramirez Rodriguez 10 mai 2020 à 01:38

3 réponses

Meilleure réponse

Vous pouvez bénéficier de l 'FormData() API.

Avec cela, vous devez simplement construire un objet formData avec le constructeur FormData():

const myForm = document.getElementById('myForm'),
      formData = new FormData(myForm)

Extrayez toutes ses entrées dans un tableau de paires de valeurs clés (name attributs de <input> nœuds):

const formEntries = [...formData.entries()]

Ou objet:

const formEntries = Object.fromEntries(formData.entries())

Ou vous pouvez obtenir des valeurs individuelles, en utilisant get() et passez la clé nécessaire comme argument.

Voici une démonstration rapide de cette approche:

const form = document.getElementById('myForm')

form.addEventListener('submit', e => {
  e.preventDefault()
  const formData = new FormData(form),
        formEntries = Object.fromEntries(formData.entries())
  console.log(formEntries)
})
<form id="myForm"><input id="user_role_ids" name="user[role_ids]" type="hidden" value="2"><div class="control-group"><label for="user_email">Email</label><div class="controls"><input type="text" value="" name="user[email]" id="user_email"></div></div><span id="erroremail" class="rightCol error"></span><div class="control-group"><label for="user_name">Name</label><div class="controls"><input id="user_name" name="user[name]" size="30" type="text"></div></div><div class="control-group"><label for="user_last_name">Last Name</label><div class="controls"><input id="user_last_name" name="user[last_name]" size="30" type="text"></div></div><div class="control-group"><label for="user_username">Name by which you publish</label><div class="controls"><input type="text" value="" name="user[username]" id="user_username"></div></div><div class="control-group"><label for="user_country_code">Country</label><div class="controls"><select id="user_country_id" name="user[country_id]"><option value="">Country</option><option value="3">Afghanistan</option><option value="6">Albania</option><input type="submit" /></form>

Si, pour une raison quelconque, vous avez besoin d'un accès bas niveau plus aux entrées enfants d'un formulaire (nœuds DOM correspondants et leurs attributs), vous pouvez opter pour HTMLFormElement.elements propriété qui renvoie HTMLCollection de tous les nœuds enfants, donc vous pouvez traverser cela (par exemple avec {{X2 }}) pour créer un objet de paires valeur / clé:

const formData = [...form.elements].reduce((r,{name,value}) => 
   (value && (r[name]=value),r),{})

Vous pouvez également consulter la démo pour cela:

const form = document.getElementById('myForm')

form.addEventListener('submit', e => {
  e.preventDefault()
  const formData = [...form.elements].reduce((r,{name,value}) => (value && (r[name]=value),r),{})
  console.log(formData)
})
<form id="myForm"><input id="user_role_ids" name="user[role_ids]" type="hidden" value="2"><div class="control-group"><label for="user_email">Email</label><div class="controls"><input type="text" value="" name="user[email]" id="user_email"></div></div><span id="erroremail" class="rightCol error"></span><div class="control-group"><label for="user_name">Name</label><div class="controls"><input id="user_name" name="user[name]" size="30" type="text"></div></div><div class="control-group"><label for="user_last_name">Last Name</label><div class="controls"><input id="user_last_name" name="user[last_name]" size="30" type="text"></div></div><div class="control-group"><label for="user_username">Name by which you publish</label><div class="controls"><input type="text" value="" name="user[username]" id="user_username"></div></div><div class="control-group"><label for="user_country_code">Country</label><div class="controls"><select id="user_country_id" name="user[country_id]"><option value="">Country</option><option value="3">Afghanistan</option><option value="6">Albania</option><input type="submit" /></form>
1
Yevgen Gorbunkov 9 mai 2020 à 23:19

Pourquoi n'essayez-vous pas de saisir l'identifiant direct de l'entrée et de cibler sa valeur?

Const a = document.getElementById ("message_utilisateur")

Puis a.id et a.innerValue fonctionnent bien

0
Mindaugas Kurlys 9 mai 2020 à 23:01

À partir de votre extrait de code, tous les formulaires peuvent être récupérés via

document.forms

Ensuite, une forme concrète pourrait être sélectionnée, par ex. première forme document.forms[0].

L'étape suivante consiste à récupérer les entrées de formulaire et à obtenir leur names or values:

document.forms[0].querySelectorAll('input')[0].value
document.forms[0].querySelectorAll('input')[0].name

// or iterate over form inputs
[...document.forms[0].querySelectorAll('input')].forEach(input => {
  console.log(input.name);
  console.log(input.value);
});
1
Nymphetamine 9 mai 2020 à 22:55