Liste déroulante dans formulaire latéral

J'avoue que j'aimerais bien arriver à comprendre mais ça fait un petit moment que je suis perdu

Bon, alors c'est pas normal, il faut reprendre toutes les difficultés et refaire un topo dessus :

  1. la liste déroulante (c'était ta demande)
  2. la taille des commentaires (ta demande)
  3. les dates dans un formulaire (ce que j'ai proposé)
  4. l'ascenseur vertical de Sébastien
  5. et le plus important, c'est l'export des valeurs vers la feuille

Je vais m'attacher d'ici demain à synthétiser tout cela ... car pour moi le but d'un forum est de progresser en compétence, pas de donner des solutions toutes faites.

Qu'est-ce que tu passerais en type date?

J'ai mis en type date dans ton formulaire tout ce qui est date ... regarde l'effet et le choix de la date

image

Bravo Mikhail,

Juste 1 mot et sa change tout.

Pour tout transmettre, j'utiliserais ...

    <script>
      function ajouter() {
        var donnees = document.forms[0]
        var tab = []
        for (var i=0;i<donnees.length;i++){
          if (donnees[i].type != "button"){tab.push(donnees[i].value)}
        }
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
      }
    </script>

après avoir encadré tous les inputs/select/textarea/date par <form>_____</form>

Effectivement, type date est une bonne idée. Par contre, la transmission des données ne fonctionne pas. J'aimerais pouvoir aider malheureusement, j'en suis incapable.

qu'est-ce que tu appelles l'ascenseur vertical?

Je reprendrai demain matin.

Avec le code ci-dessus a priori les données sont bien transmises y compris les listes déroulantes.

Transfert de toutes les données et reset du formulaire complet

      function ajouter() {
        var donnees = document.forms[0]
        var tab = []
        for (var i=0;i<donnees.length;i++){
          if (donnees[i].type != "button"){tab.push(donnees[i].value)}
        }
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
        document.forms[0].reset()
      }

ce qui donne, en encadrant les éléments du formulaire par la balise form :

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0;
        color: #333;
        font-family: Roboto, Arial, sans-serif;
      }
      p {
        margin: 0.8rem 0 0.3rem;
      }
      .annuler {
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.88rem;
        color: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      input[type="text"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
      input[type="button"] {
        display: block;
        width: 100%;
        padding: 0.7rem 0 0.6rem;
        border: none;
        background: #30a392;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
        border-radius: 0.4rem;
      }
      input[type="button"]:hover {
        background: #40ad96;
      }
      input::placeholder, textarea::placeholder {
        color: #aaa;
      }
      input:focus::placeholder, textarea:focus::placeholder {
        color: #f3f3f3;
      }
      select,textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
      input[type="date"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" name="nom" value="" placeholder="Nom">
      <input type="text" name="prenom" value="" placeholder="Prénom">
      <input type="text" name="tel" value="" placeholder="Tel">
      <input type="text" name="email" value="" placeholder="Email">
      <select name="Type de contact">
        <option value="" disabled selected>Type de contact</option>
        <option value="Tel" >Tel</option>
        <option value="Email" >Email</option>
        <option value="formulaire" >formulaire site internet</option>
        <option value="test" >test en ligne</option>
        <option value="message" >Message vocal</option>
        <option value="visite" >visite</option>
        <option value="offre" >offre EDOF</option>
      </select>
      <select name="contact">
        <option value="" disabled selected>Qui a pris contact?</option>
        <option value="Phil" >Phil</option>
        <option value="Pat" >Pat</option>
        <option value="Séra" >Séraphina</option>
        <option value="Mouaad" >Mouaad</option>
      </select>
      <p><strong>Premier contact</strong></p>
      <input type="date" name="Date1" value="" >
      <textarea name="Commentaire_contact1" placeholder="Commentaire"></textarea>
      <p><strong>Deuxième contact</strong></p>
      <input type="date" name="Date1" value="" >
      <textarea name="Commentaire_contact2" placeholder="Commentaire"></textarea>
      <p><strong>Troisième contact</strong></p>
      <input type="date" name="Date1" value="" >
      <textarea name="Commentaire_contact3" placeholder="Commentaire"></textarea>
      <input type="button" value="Ajouter" onclick="ajouter()">
    </form>
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
      function ajouter() {
        var donnees = document.forms[0]
        var tab = []
        for (var i=0;i<donnees.length;i++){
          if (donnees[i].type != "button"){tab.push(donnees[i].value)}
        }
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
        document.forms[0].reset()
      }
    </script>
  </body>
</html>

C'est vraiment super. Bravo.

J'aurais deux questions supplémentaires.

Est-ce qu'il est possible de décaler le transfert des données de 2 colonnes?

image

Est-ce que je peux me permettre de te demander quelques explications pour comprendre la partie transfert?

function ajouter() {
        var donnees = document.forms[0]
        var tab = []
        for (var i=0;i<donnees.length;i++){
          if (donnees[i].type != "button"){tab.push(donnees[i].value)}
        }
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
        google.script.run.ajouterLigne(tab);
        document.forms[0].reset()
      }
      function ajouter() {

//je prends tous les 'objets' de la première 'form' (formulaire en html), en fait il n'y en a qu'eune seule, attention les indices commencent à 0
        var donnees = document.forms[0]

//j'initialise le tableau de transfert (array)
        var tab = []

//boucle : pour chaque élément du formulaire
        for (var i=0;i<donnees.length;i++){
//sauf s'il s'agit d'un bouton, je mets dans la variable tab la valeur de l'élément, cela fonctionne bien pour les inputs, dates, textarea et select
          if (donnees[i].type != "button"){tab.push(donnees[i].value)}
        }

//ici Sébastien contrôlait qu'il y avait au moins un champ de renseigné
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }

//je lance le script de google en lui transmettant les valeurs
        google.script.run.ajouterLigne(tab);

//je réinitialise le formulaire
        document.forms[0].reset()
      }

pour commencer à la troisième colonne, il y a plusieurs solutions, essaie celle-ci qui a pour effet de remplir le tableau de transfert avec deux variables vides

var tab = []
tab.push('')
tab.push('')
mais si cela pose problème, il faut modifier le code de la fonction
ajouterLigne

autre solution pour commencer colonne 3

function ajouterLigne(tab) {
  //SpreadsheetApp.getActiveSheet().appendRow(tab);
  var f = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
  var derL = f.getLastRow()+1
  var col = 3
  f.getRange(derL,col,1,tab.length).setValues([tab])
}

C'est fantastique. Ca marche très bien avec la première méthode (var tab = [ ]). Par contre, je n'ai pas réussi avec la deuxième.

La dernière chose que j'aimerais arriver à faire serait d'afficher le formulaire à partir d'un onglet qui filtre la base de données. J'ai créé cet onglet dans le fichier exemple.

L'objectif serait de cliquer le nom1 par exemple et d'afficher le formulaire avec toutes les infos le concernant. Est-ce que c'est faisable?

Bonjour,

Oui c'est possible.

Il faux masquer les colonnes A-M, puis insérer une validation de données de B1:B en N1 et insérer en O1.

=INDEX(C1:M;EQUIV(N1;B1:B;0))

J'espère que cela te convient.

PS: Si ton problème est résolu, n'oublie pas de voter et de cocher les messages qui t'on aider.

Merci pour cette proposition mais ce n'est pas du tout ça que je souhaite. Ca, je sais faire.

Ce que je voudrais, c'est qu'en cliquant directement dans la liste filtrée, sur la case B2 par exemple, le formulaire de saisie concernant le nom de la case B2 s'affiche avec toutes les infos le concernant. Quand je parle de formulaire, je veux dire ça

image

Est-ce que c'est faisable?

A d’accord,

Oui faisable mais avec des modifications. Je regarde sa.

Bonjour ImoKa,

PS: Si ton problème est résolu, n'oublie pas de voter et de cocher les messages qui t'on aider.

Merci de ne pas demander de voter en plus de cocher (cocher apporte déjà 1 vote) et n'hésite pas à utiliser le panneau suivant

Ce que je voudrais, c'est qu'en cliquant directement dans la liste filtrée, sur la case B2 par exemple, le formulaire de saisie concernant le nom de la case B2 s'affiche avec toutes les infos le concernant.

Est-ce que c'est faisable?

Oui, je vais laisser ImoKa y travailler ... sinon je m'y mettrais.

Oui faisable mais avec des modifications. Je regarde sa.

Une question : as-tu l'intention ensuite d'apporter des modifications aux données et les enregistrer ?

Oui. Tout fait. J'aimerais pouvoir les éditer et les modifier ou en ajouter.

Par exemple, si un premier contact a été établi, il faudrait que je puisse le consulter et ajouter la date et le commentaire du deuxième contact.

Bonjour Sébastien,

Je n'avais pas ce panneau avant ce message.

A Patrick, j'essaie quelque chose mais sa m'affiche mon code au lieu des valeurs.

Je réessaie plus tard.

A Mikhail, tu veux voir mon code non.

J'ai juste insérer des cases à cocher, une formule en O1 qui permet l'exécution du script et une boite de dialogue.

Ca fait longtemps que vous étudiez ce genre de script?

6mois le javascript, html 5ans. C'est du loisir pour moi.

Rechercher des sujets similaires à "liste deroulante formulaire lateral"