Utiliser des boutons dans un formulaire Google sheet
D
Bonjour à tous !
J'ai essayé d'implémenter des boutons de type "radio" dans l'excellent formulaire latéral proposé sur ce site :
Le premier bouton est OUI : il génère une liste a selectionner
le deuxième bouton est NON : il génère une case pré-remplie
comme ceci :
Je souhaiterai que le résultat du OUI ou NON apparaisse dans la même colonne sur la feuille Google Sheets, est-ce possible ?
Mon code est le suivant :
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0 0.5rem; /* à remplacer par "margin: 0;" si affiché dans une boîte de dialogue */
color: #333;
font-family: Roboto, Arial, sans-serif;
overflow: hidden;
}
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"], input[list="select"] {
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;
}
</style>
</head>
<body action="javascript:void(0)">
<p>Nom</p>
<input type="text" name="nom" value="">
<p>Prénom</p>
<input type="text" name="prenom" value="">
<p>Adresse</p>
<input type="text" name="adresse" value="">
<p>Code postal</p>
<input type="text" name="code_postal" value="">
<p>Ville</p>
<input type="text" name="ville" value="">
<p>Avez-vous un vehicule ?</p>
<label style="color:red;">
<input type="radio" id="yes" name="yesOrNo" value="yes" style="color:red;" onchange="displayQuestion(this.value)" /><b>OUI</b></label>
<label style="color:Green;" />
<input type="radio" id="no" name="yesOrNo" value="no" style="background-color:green;" onchange="displayQuestion(this.value)" /><b>NON</b></label>
<div id="yesQuestion" style="display:none;"><br/>
<span style="color:red;" />Quel est votre vehicule ?</span>
<input list="select" placeholder="Choisissez une réponse " />
<datalist class="form-control" id="select">
<option value="VOITURE"/>
<option value="MOTO"/>
<option value="VELO"/>
<option value="TROTINETTE"/>
</datalist>
</div>
<div id="noQuestion" style="display:none;"><br/>
<input type="text" value="pas de vehicule"/>
</div>
<p>Observations</p>
<input type="text" value="">
<input type="button" value="Ajouter" onclick="ajouter()">
<span class="annuler" onclick="google.script.host.close()">Annuler</span>
<script>
function displayQuestion(answer) {
document.getElementById(answer + 'Question').style.display = "block";
if (answer == "yes") {
document.getElementById('noQuestion').style.display = "none";
} else if (answer == "no") {
document.getElementById('yesQuestion').style.display = "none";
}
}
function ajouter() {
// Source : https://www.sheets-pratique.com/fr/codes/sidebar
const inputs = document.querySelectorAll('input[type="text"],input[list="select"]');
let tab = [];
// Récupération des valeurs
for (const input of inputs) {
tab.push(input.value);
}
// Si tous les champs sont vides
if (tab.join('') == '') {
alert('Le formulaire est vide !');
return;
}
// Vider les champs
inputs.forEach(input => input.value = '');
// Envoi dans la feuille
google.script.run.ajouterLigne(tab);
}
</script>
</body>
</html>Le fichier en live : https://docs.google.com/spreadsheets/d/18eG30jLZlE25smVLWOnodtN6hRXTndM-7R1TkTcC8-k/edit?usp=sharing
Merci d'avance !