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

**SpaceFrog** · 25/05/2023, 08h55

J'ai supprimé la partir spreadsheet ...

https://jsfiddle.net/fLrgyhcu/

ça fonctionne

Tu l'utilises dans Google sheets ...
à priori il ne connait pas document .

Regarde peut être du coté de https://developers.google.com/apps-s...ce/forms?hl=fr

**ASCIIDEFOND** · 25/05/2023, 09h29

Salut doofy59,

Ton script communique bien avec Google Sheets ?
Un autre exemple :

https://www.youtube.com/watch?v=xVstFPHSfm8

**doofy59** · 30/05/2023, 04h21

Bonjour,

Merci SpaceFrog et ASCIIDEFOND pour toutes vos propositions, j'ai pris le temps de toutes les tester, et finalement j'arrive à récupérer les donnée dans mon classeur avec celle-ci:

Code :

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
37
38
39
40
41
42
43
// Original code from https://github.com/jamiewilson/form-to-google-sheets
// Updated for 2021 and ES6 standards
 
const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()
 
function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}
 
function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)
 
  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)
 
    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1
 
    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })
 
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
 
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }
 
  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }
 
  finally {
    lock.releaseLock()
  }
}

mais ce n'est pas exactement ce que je veux...
Avec ce code, j'ai tous les imputs de mon formulaire qui sont remplis dans ma feuille suivant l'odre de l'entête que j'ai défini et ligne après ligne au fur et à mesure qu'on clic sur le bouton submit.
Pour tant je veux remplir un imput par exemple "Email" dans la celulle "A5" et "Nom" dans la cellule "C12" par exemple, et sans entêtes.

Lorsque j'essaye de déboguer, le remplissage des cellules est effectué avec ces 02 lignes:

Code :

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

1
2
3
4
5
 const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })
 
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

j'ai essayé de les modifier comme ceci (pour récurer la valeur de l'imput "Email" dans la cellule A5):

Code :

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

1
2
3
 const newRow = document.getElementById("Email").value
 
    sheet.getRange("A5").setValues([newRow])

Code :

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

1
2
3
 const headers = 'Email'
const newRow = e.parameter[headers]
    sheet.getRange("A5").setValues([newRow])

mais cela ne marche pas.

Dans le premier cas j'ai toujours l'erreur: ReferenceError: document is not defined
et dans le second cas, il ne se passe rien du tout.

Est-ce que vous auriez une idée de comment procéder svp ?

Merci par avance.

**doofy59** · 05/06/2023, 16h42

Bonjour a tous,

j'ai trouvé une solution à mon problème. Je recueille les données du formulaire comme prévu dans la feuille "sheet1", puis je créé des scripts pour copier les

données de la feuille "sheet1"et les envoyer dans les cellules du classeur qui leurs sont destinées.

Merci à SpaceFrog et ASCIIDEFOND, sans votre aide je n'y serai pas arrivé, et merci au forum.

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

APIs Google

Discussions similaires

Partager

Partager