Récupérer les informations d'une form HTML

**doofy59** · 20/05/2023, 04h44

Bonjour à tous.

je suis débutant dans le langage javascript, et j'ai un petit soucis pour récupérer une information dans mon formulaire HTML.

j'ai réalisé le script du formulaire ci-dessous en HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Formulaire</h1>
    <form name="dmc">
<fieldset>
  <legend>Type de venue</legend>
  <input type="radio" required name="action" id="track" value="track" /><label for="track">Naissance</label>
  <input type="radio" required name="action" id="event" value="event"  /><label for="event">Achat</label><br />
</fieldset><br />
 <label>
    Date de naissance:
    <input type="date" name="bday" id="gday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
  <label>
    Date d'arrivée à la ferme:
    <input type="date" name="cday" id="hday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label><br /><br />
   <input type="text" id="name" name="name" placeholder="Nom">
      <br><br>
      <input type="text" id="email" name="email" placeholder="Email">
      <br><br>
<fieldset>
  <legend>sexe</legend>
  <input type="radio" required name="action" id="sex" value="track" /><label for="sex">M</label>
  <input type="radio" required name="action" id="sexe" value="event"  /><label for="sexe">F</label><br />
</fieldset><br />
<button type="button" onclick="afficher();">Valider</button>
    </form>
  </body>
</html>

qui s'affiche lorsque je click un bouton situé dans une feuille de mon classeur google Sheets.

Mon souhait est de consigner les informations remplies dans formulaire au sein la feuille "sheet1" de mon classeur, lorsqu'on click sur le bouton Valider du formulaire.

Pour cela j'ai crée le script ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function afficher() {
var name = document.forms.dmc.getElementById("Nom").value;
var email = document.getElementById("email").value;
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName("sheet1");
  sheet.getRange("A1").setValue(name);
  sheet.getRange("B1").setValue(email);
}

Mais lorsque j'exécute la fonction afficher, j'ai une erreur:

ReferenceError: document is not defined au niveau des variables name, email, spreadsheet et sheet.

Est-ce que quelqu'un aurait une idée d'où viens le problème et comment y remédier svp ?

A dispo pour tout complément d'info.

Merci,

**ASCIIDEFOND** · 20/05/2023, 16h32

Salut doofy59,

Peut-être un début de piste ici ?
https://les-enovateurs.com/donnees-f...l-google-sheet

**doofy59** · 21/05/2023, 23h31

Merci ASCIIDEFOND,

j'avais visité ce site mais je n'ai pas pu adapter sa solution à mon problème.

chez lui le formulaire est généré pour plusieurs utilisateurs alors mon formulaire est pour un utilisateur en particulier.

Il y'a les étapes comme déployer le script en application web et la partie JQUERY que je n'arrive pas réaliser (je comprend d'ailleurs pas trop en quoi elles consistent).

Mais j'ai regardé sur internet, en utilisant la syntaxe: "document.forms.NomDuformulaire" je devrais normalement pourvoir avoir accès aux éléments du formulaire, je ne sais pas pourquoi ça ne marche pas

**SpaceFrog** · 22/05/2023, 09h45

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var name = document.getElementById("Name").value;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <input type="text" id="Nom" name="name" placeholder="Nom">

Name != Nom ...

**ASCIIDEFOND** · 22/05/2023, 10h01

Salut doofy59,

Effectivement il y a une erreur de référence sur le nom de l'ID name comme le souligne SpaceFrog.

Sinon comme ça ?

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  var dmc = document.forms['dmc']
  var name = dmc.elements.name.value
  var email = dmc.elements.email.value

**SpaceFrog** · 22/05/2023, 10h03

A partir du moment ou tu as un id et que tu utilises le bon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var name = document.getElementById("Nom").value;

Pas de confusion possible car un id doit être unique sur la page.
Pas besoin de passer par le form

**doofy59** · 25/05/2023, 04h00

Merci SpaceFrog et ASCIIDEFOND,

J'ai essayé vos deux propositions, mais cela ne fonctionne toujours pas

.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Formulaire</h1>
    <form name="dmc">
<fieldset>
  <legend>Type de venue</legend>
  <input type="radio" required name="action" id="track" value="track" /><label for="track">Naissance</label>
  <input type="radio" required name="action" id="event" value="event"  /><label for="event">Achat</label><br />
</fieldset><br />
 <label>
    Date de naissance:
    <input type="date" name="bday" id="gday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
  <label>
    Date d'arrivée à la ferme:
    <input type="date" name="cday" id="hday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label><br /><br />
    <input type="text" id="Nom" name="name" placeholder="Nom">
      <br><br>
      <input type="text" id="email" name="email" placeholder="Email">
      <br><br>
<fieldset>
  <legend>sexe</legend>
  <input type="radio" required name="action" id="sex" value="track" /><label for="sex">M</label>
  <input type="radio" required name="action" id="sexe" value="event"  /><label for="sexe">F</label><br />
</fieldset><br />
<button type="button" onclick="afficher();">Texte du bouton</button>
    </form>
  </body>
</html>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function afficher() {
var name = document.getElementById("Nom").value;
var email = document.getElementById("email").value;
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName("sheet1");
  sheet.getRange("A1").setValue(name);
  sheet.getRange("B1").setValue(email);
}

Toujours la même erreur:

ReferenceError: document is not defined

je comprend vraiment pas pourquoi çà ne marche pas

Récupérer les informations d'une form HTML [Google Sheets]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager