IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

APIs Google Discussion :

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


Sujet :

APIs Google

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2017
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2017
    Messages : 8
    Points : 7
    Points
    7
    Par défaut Récupérer les informations d'une form HTML
    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,

  2. #2
    Membre habitué Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    novembre 2002
    Messages
    106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : novembre 2002
    Messages : 106
    Points : 174
    Points
    174
    Par défaut
    Salut doofy59,

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

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2017
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2017
    Messages : 8
    Points : 7
    Points
    7
    Par défaut
    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

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 574
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 574
    Points : 66 537
    Points
    66 537
    Billets dans le blog
    1
    Par défaut
    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 ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre habitué Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    novembre 2002
    Messages
    106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : novembre 2002
    Messages : 106
    Points : 174
    Points
    174
    Par défaut
    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

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 574
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 574
    Points : 66 537
    Points
    66 537
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2017
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2017
    Messages : 8
    Points : 7
    Points
    7
    Par défaut
    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

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    39 574
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 39 574
    Points : 66 537
    Points
    66 537
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre habitué Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    novembre 2002
    Messages
    106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : novembre 2002
    Messages : 106
    Points : 174
    Points
    174
    Par défaut
    Salut doofy59,

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

  10. #10
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2017
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2017
    Messages : 8
    Points : 7
    Points
    7
    Par défaut
    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.

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2017
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Manche (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2017
    Messages : 8
    Points : 7
    Points
    7
    Par défaut
    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épondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [RegEx] Récupérer des informations d'une page HTML distante
    Par Marshall_Mathers dans le forum Langage
    Réponses: 2
    Dernier message: 27/02/2007, 16h49
  2. Erreur, Parser : récupérer les liens d'une page html
    Par floflo_2006 dans le forum Général Java
    Réponses: 5
    Dernier message: 13/12/2006, 01h26
  3. Récupérer les informations d'une applet
    Par outlawz dans le forum Applets
    Réponses: 3
    Dernier message: 30/03/2006, 10h05
  4. Réponses: 3
    Dernier message: 10/03/2006, 14h15
  5. Réponses: 5
    Dernier message: 23/12/2005, 19h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo