[Input Radio] Récupérer la valeur des radios cochés

Le 15/05/2024 à 10:24

Bonjour à tous !

Je me permets de vous importuner, car j'ai besoin de votre aide.

En effet, je cherche à ajouter, dans une feuille, des données par l'intermédiaire d'un formulaire sur la barre latérale, avec des choix par input radio.

Le problème que je rencontre est que, lorsque je lance mon script, il me donne tout le temps Choix 01 et Choix 06.

Et je ne parviens pas à récupérer les valeurs des input radio checked. D'où mon appel à l'aide.

Voici les codes que j'utilise pour :

  • Le code des scripts utilisés :
function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu('Menu supplémentaire')
    .addItem('Index1', 'ShowSidebar')
    .addToUi();
}
function ShowSidebar(){
  var ui = SpreadsheetApp.getUi();
  var html = HtmlService
    .createTemplateFromFile("Index1")
    .evaluate();
  html.setTitle("Choix :");
  ui.showSidebar(html);
}
function AjouterChoix(tableau) {
  SpreadsheetApp.getActive().appendRow(tableau);
}
  • Le code du HTML utilisé :
<!DOCTYPE html>
<html>
<body>
  <p>1er Choix:</br>
      <input type="radio" name="Choix01" id="Choix01" value="Choix 01">Choix 01</br>
      <input type="radio" name="Choix01" id="Choix01" value="Choix 02">Choix 02</br>
      <input type="radio" name="Choix01" id="Choix01" value="Choix 03">Choix 03</br>
      <input type="radio" name="Choix01" id="Choix01" value="Choix 04">Choix 04</br>
      <input type="radio" name="Choix01" id="Choix01" value="Choix 05">Choix 05</br>
  </p>
  <p>2ème Choix:</br>
      <input type="radio" name="Choix02" id="Choix02" value="Choix 06">Choix 06</br>
      <input type="radio" name="Choix02" id="Choix02" value="Choix 07">Choix 07</br>
      <input type="radio" name="Choix02" id="Choix02" value="Choix 08">Choix 08</br>
      <input type="radio" name="Choix02" id="Choix02" value="Choix 09">Choix 09</br>
      <input type="radio" name="Choix02" id="Choix02" value="Choix 10">Choix 10</br>
  </p>
  <p>
    <input type="button" value="Ajouter" onclick="Ajouter()">
    <input type="button" value="Annuler" onclick="Annuler()">
  </p>
  <div id="result"></div>
  <script>
    function Ajouter() {
      const CH01 = document.getElementById("Choix01").value;
      const CH02 = document.getElementById("Choix02").value;
      google.script.run.AjouterChoix([CH01, CH02]);
    }
    function Annuler(){
      google.script.host.close();
    }
  </script>
</body>
</html>

Dans l'absolu, je cherche à ajouter les valeurs dans des cellules prédéfinies.

Edit : Voici le lien du fichier si vous souhaitez y faire des tests - https://docs.google.com/spreadsheets/d/1V-o9bXozoJsoWnHVBT-1NhUQgNF5WAsSi4uNdwBbhPI/edit?usp=sharing

Le 22/05/2024 à 10:44

Bonjour à tous !

J'ai continué mes recherches. Et j'ai trouvé une solution.

Je vous partage le code HTML utilisé, des fois que cela pourrait aider d'autres utilisateurs :

<!DOCTYPE html>
<html>
<form>
  <p>1er Choix:</br>
      <input type="radio" name="Choix01" value="Choix 01">Choix 01</br>
      <input type="radio" name="Choix01" value="Choix 02">Choix 02</br>
      <input type="radio" name="Choix01" value="Choix 03">Choix 03</br>
      <input type="radio" name="Choix01" value="Choix 04">Choix 04</br>
      <input type="radio" name="Choix01" value="Choix 05">Choix 05</p>
  <p>2ème Choix:</br>
      <input type="radio" name="Choix02" value="Choix 06">Choix 06</br>
      <input type="radio" name="Choix02" value="Choix 07">Choix 07</br>
      <input type="radio" name="Choix02" value="Choix 08">Choix 08</br>
      <input type="radio" name="Choix02" value="Choix 09">Choix 09</br>
      <input type="radio" name="Choix02" value="Choix 10">Choix 10</p>
  <p>
    <p><button type="submit">Choisir</button></p>
    <input type="button" value="Annuler" onclick="Annuler()">
  </p>
  <div id="result"></div>
</form>

<pre id="log"></pre>

<script>
  const form = document.querySelector("form");
  const log = document.querySelector("#log");

  form.addEventListener("submit",(event) => {
    const data = new FormData(form);
    let output = "";
    for (const entry of data) {
      output = `${entry[1]}`;
      google.script.run.AjouterChoix([output]);
    }
  },
  false,
  );
  function Annuler(){
      google.script.host.close();
  }
</script>

</html>

Ce n'est pas exactement ce que je recherche, mais faute de grives...

Le 22/05/2024 à 10:50

Bonjour,

En listant ton premier script, toutes les radios avaient la même ID, voici une correction possible :

<!DOCTYPE html>
<html>
<body>
  <p>1er Choix:<br>
      <input type="radio" name="Choix01" id="Choix01_1" value="Choix 01">Choix 01<br>
      <input type="radio" name="Choix01" id="Choix01_2" value="Choix 02">Choix 02<br>
      <input type="radio" name="Choix01" id="Choix01_3" value="Choix 03">Choix 03<br>
      <input type="radio" name="Choix01" id="Choix01_4" value="Choix 04">Choix 04<br>
      <input type="radio" name="Choix01" id="Choix01_5" value="Choix 05">Choix 05<br>
  </p>
  <p>2ème Choix:<br>
      <input type="radio" name="Choix02" id="Choix02_1" value="Choix 06">Choix 06<br>
      <input type="radio" name="Choix02" id="Choix02_2" value="Choix 07">Choix 07<br>
      <input type="radio" name="Choix02" id="Choix02_3" value="Choix 08">Choix 08<br>
      <input type="radio" name="Choix02" id="Choix02_4" value="Choix 09">Choix 09<br>
      <input type="radio" name="Choix02" id="Choix02_5" value="Choix 10">Choix 10<br>
  </p>
  <p>
    <input type="button" value="Ajouter" onclick="Ajouter()">
    <input type="button" value="Annuler" onclick="Annuler()">
  </p>
  <div id="result"></div>
  <script>
    function Ajouter() {
      var choix1 = document.querySelector('input[name="Choix01"]:checked').value;
      var choix2 = document.querySelector('input[name="Choix02"]:checked').value;
      google.script.run.AjouterChoix([choix1, choix2]);
    }
    function Annuler(){
      google.script.host.close();
    }
  </script>
</body>
</html>
Le 22/05/2024 à 11:31

Merci Pierre pour ton retour ! Cool.

Rechercher des sujets similaires à "input radio recuperer valeur radios coches"