Imposer la couleur du texte prérempli dans un formulaire
Le script ci-dessous, il faut le recréer pour toutes les listes déroulantes?
<html>
<head>
<script>
function changeColor(s) {
if(s.options[s.selectedIndex].value == "") {
s.style.color = "#444";
} else {
s.style.color = "black";
}
}
</script>
<style>
.placeholder{
display: block;
box-sizing: border-box;
margin-bottom: 1rem;
border: none;
font-size: 1.08rem;
border-radius: 0.4rem;
background: #f3f3f3;
color: #a9a9a9;
width: 100%;
height: 25px;
}
option:first-child{color:black; display: none;}
option {color:black;}
</style>
</head>
<body>
<select id="choix" class="placeholder" onchange="changeColor(this);">
<option value="" disabled selected hidden>Type de contact</option>
<option value="email">Email</option>
<option value="tel">Tel</option>
<option value="courrier">Courrier</option>
<option value="forum">Forum</option>
<option value="ami">Ami</option>
</select>
</body>
</html>Bravo ImoKa, idée lumineuse ... je dirais même que ce script suffit puisque si la valeur est nulle on ne voit rien !
<script>
function changeColor(s) {
s.style.color = "#444"
}
</script>Reste à voir ce que cela fait sur le formulaire modification ...
<!DOCTYPE html>
<html>
<head>
<?!= rapatrier('css') ?>
<script>
function changeColor(s) {
s.style.color = "#444";
}
</script>
</head>
<body>
<script>
<?
var contacts = transfererContacts();
?>
</script>
<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">
<p><strong>Qui a pris contact?</strong></p>
<select name="contact" id="contact" onchange="changeColor(this);">
<option value="" disabled selected >Selectionner ...</option>
<? for (var i = 0; i < contacts.length; i++) { ?>
<option value="<?= contacts[i][0] ?>" ><?= contacts[i][0] ?></option>
<? } ?>
</select>
<p><strong>Premier contact</strong></p>
<input type="date" name="Date" value="" >
<textarea name="Commentaire_contact" placeholder="Commentaire"></textarea>
<input type="button" value="Ajouter" onclick="ajouter()">
</form>
<script>
function ajouter() {
var donnees = document.forms[0]
var tab = []
var okPays = false
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;
}
var d = new Date()
tab.push(d.toString())
google.script.run.ajouterLigne(tab);
document.forms[0].reset()
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<?!= rapatrier('css') ?>
<script>
function changeColor(s) {
s.style.color = "#444";
}
</script>
</head>
<body>
<script>
<?
var data = transfererData();
var contacts = transfererContacts();
var ligne = numLigne();
?>
</script>
<form>
<input type="text" name="nom" value="<?= data[0][0] ?>" placeholder="Nom">
<input type="text" name="prenom" value="<?= data[0][1] ?>" placeholder="Prénom">
<input type="text" name="tel" value="<?= data[0][2] ?>" placeholder="Tel">
<input type="text" name="email" value="<?= data[0][3] ?>" placeholder="Email">
<p><strong>Qui a pris contact?</strong></p>
<select name="contact" id="contact" onchange="changeColor(this);">
<option value="" disabled selected >Selectionner ...</option>
<? for (var i = 0; i < contacts.length; i++) { ?>
<option value="<?= contacts[i][0] ?>" <?= ((contacts[i][0]==data[0][4])?'selected':'') ?> ><?= contacts[i][0] ?></option>
<? } ?>
</select>
<p><strong>Premier contact</strong></p>
<input type="date" name="Date" value="<?= ((data[0][5]=='')?'':data[0][5].getFullYear()+'-'+('0'+(data[0][5].getMonth()+1)).slice(-2)+'-'+('0'+data[0][5].getDate()).slice(-2)) ?>" >
<textarea name="Commentaire_contact" placeholder="Commentaire"><?= data[0][6] ?></textarea>
<input type="button" value="Modifier ligne <?= ligne ?> de la base de données" onclick="modifier()">
</form>
<script>
function modifier() {
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;
}
var d = new Date()
tab.push(d.toString())
google.script.run.modifierLigne(tab);
}
</script>
</body>
</html>@Mikhail: J'ai chatié les neurones
Le script ci-dessous, il faut le recréer pour toutes les listes déroulantes?
<script> function changeColor(s) { if(s.options[s.selectedIndex].value == "") { s.style.color = "#444"; } else { s.style.color = "black"; } } </script>
non, ce que tu dois répéter sur chaque select, c'est d'ajouter
onchange="changeColor(this);"@Mikhail: J'ai chatié les neurones
Oui, bravo ! je reste avec un soucis sur le formulaire modif
<select name="contact" id="contact" onchange="changeColor(this);">... quand une valeur est déjà présente, elle ne s'affiche pas en noir mais en gris clair (sauf erreur de ma part)
j'ai essayé ceci sans grand résultat pour le moment !
<select name="contact" onchange="changeColor(this);" <?= ((data[0][4]=='')?'':'style="color:#444"') ?> >J'ai pas eu le temps d'essayer pour le form de modif. La je ne vois pas pour l'instant mais peut-être un script plus poussé.
Plus tard dans la journée ou demain.
En suivant ta recommandation ImoKa, j'ai fini après maints essais de faire
window.onload = function(){
if (<?=(data[0][2])?> !='') {document.getElementById("indicatif").style.color = "#444"}
if (<?=(data[0][5])?> !='') {document.getElementById("contact").style.color = "#444"}
}attention aux indices, sur mon fichier je n'ai pas forcément les mêmes ...
Alors là bravo !!!!!
J'avais a peine commencé à essayer une piste dans notepad est la ce script.
PS: J'utiliserai plutôt ceci.
window.onload = function(){
if (<?=(data[0][2])?> !='') {d("indicatif")}
if (<?=(data[0][5])?> !='') {d("contact")}
}
function d(id) {document.getElementById(id).style.color = "#444"}Pardonnez moi mais ce n'est pas clair.
Je ne comprends pas bien ce que je dois ajouter où.
Pour chaque liste déroulante j'ai ajouté
onchange="changeColor(this);"Au début du formCreation, j'ai ajouté
<script>
function changeColor(s) {
s.style.color = "#444";
}
</script>mais je n'ai pas compris ce qu'il fallait que j'ajoute dans le css
je viens de changer ton css dans ton fichier pour les créations
dès que tu es prêt on passera aux modifications où il faudra ajouter un code
Super. Ca marche. C'est impeccable.
Si tu veux bien, explique moi comment passer aux modifications
J'abuse un peu mais est-ce que vous pensez qu'il serait possible d'en faire autant pour les dates?
L'idéal serait de griser lorsqu'il n'y a pas de date et noircir lorsqu'il y en a une.
J'abuse un peu mais est-ce que vous pensez qu'il serait possible d'en faire autant pour les dates?
L'idéal serait de griser lorsqu'il n'y a pas de date et noircir lorsqu'il y en a une.
oui, beau challenge ! on va s'y mettre ...
Super. Ca marche. C'est impeccable.
Si tu veux bien, explique moi comment passer aux modifications
Fais les mêmes modifs, plus ceci
au lieu de
<script>
function changeColor(s) {
s.style.color = "#444";
}
</script>complète comme suit :
<script>
function changeColor(s) {
s.style.color = "#444";
}
window.onload = function(){
if (<?=(data[0][2])?> !='') {changeColor(document.getElementById("indicatif"))}
if (<?=(data[0][5])?> !='') {changeColor(document.getElementById("contact"))}
}
</script>pour chaque indice de data concerné (ici 2 et 5)
J'abuse un peu mais est-ce que vous pensez qu'il serait possible d'en faire autant pour les dates?
L'idéal serait de griser lorsqu'il n'y a pas de date et noircir lorsqu'il y en a une.
1- dans le css, sépare date et texte comme suit en mettant color: #aaa pour les dates
input[type="date"] {
font-family: Roboto, Arial, sans-serif;
display: block;
width: 100%;
box-sizing: border-box;
margin-bottom: 1rem;
padding: 0.6rem 0.7rem;
background: #f3f3f3;
color: #aaa;
border: none;
font-size: 1.08rem;
border-radius: 0.4rem;
}
input[type="text"] {
font-family: Roboto, Arial, sans-serif;
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;
}2- ajoute aux dates onchange="changeColor(this);"
3- complète le script window.onload pour les modifications de dates sur formModification
4- ajoute bien id="dateXX" dans les input dates
J'ai dû faire une erreur quelque part.
J'ai un message d'erreur
<!DOCTYPE html>
<html>
<head>
<?!= rapatrier('css') ?>
<script>
function changeColor(s) {
s.style.color = "#444";
}
window.onload = function(){
if (<?=(data[0][0])?> !='') {changeColor(document.getElementById("etat"))}
if (<?=(data[0][1])?> !='') {changeColor(document.getElementById("urgence"))}
if (<?=(data[0][7])?> !='') {changeColor(document.getElementById("prof"))}
if (<?=(data[0][8])?> !='') {changeColor(document.getElementById("langue"))}
if (<?=(data[0][9])?> !='') {changeColor(document.getElementById("test"))}
if (<?=(data[0][10])?> !='') {changeColor(document.getElementById("contact"))}
if (<?=(data[0][19])?> !='') {changeColor(document.getElementById("etatDevis"))}
}
</script>
</head>
<body>
<script>
<?
var data = transfererData();
var etats = transfererEtats();
var urgences = transfererUrgences();
var langues = transfererLangues();
var profs = transfererProfs();
var contacts = transfererContacts();
var tests = transfererTests();
var etatsDevis = transfererEtatsDevis();
var d1 = data[0][6];
var d2 = data[0][11];
var d3 = data[0][13];
var d4 = data[0][15];
var d5 = data[0][17];
var d6 = data[0][18];
var ligne = numLigne()
?>
</script>
<form>
<select name="etat" onchange="changeColor(this);">
<option value="" disabled selected >Etat</option>
<? for (var i = 0; i < etats.length; i++) { ?>
<option value="<?= etats[i][0] ?>" <?= (etats[i][0]==data[0][0]?'selected':'') ?> ><?= etats[i][0] ?></option>
<? } ?>
</select>
<select name="urgence" onchange="changeColor(this);">
<option value="" disabled selected >Urgence</option>
<? for (var i = 0; i < urgences.length; i++) { ?>
<option value="<?= urgences[i][0] ?>" <?= (urgences[i][0]==data[0][1]?'selected':'') ?> ><?= urgences[i][0] ?></option>
<? } ?>
</select>
<input type="text" name="nom" value="<?= data[0][2] ?>" placeholder="Nom">
<input type="text" name="prenom" value="<?= data[0][3] ?>" placeholder="Prénom">
<input type="text" name="tel" value="<?= data[0][4] ?>" placeholder="Tel">
<input type="text" name="email" value="<?= data[0][5] ?>" placeholder="Email">
<input type="date" name="d1" value="<?= ((d1=='')?'':d1.getFullYear()+'-'+('0'+(d1.getMonth()+1)).slice(-2)+'-'+('0'+d1.getDate()).slice(-2)) ?>" >
<select name="prof" onchange="changeColor(this);">
<option value="" disabled selected >Professeur</option>
<? for (var i = 0; i < profs.length; i++) { ?>
<option value="<?= profs[i][0] ?>" <?= (profs[i][0]==data[0][7]?'selected':'') ?> ><?= profs[i][0] ?></option>
<? } ?>
</select>
<select name="langue" onchange="changeColor(this);">
<option value="" disabled selected >Langue</option>
<? for (var i = 0; i < langues.length; i++) { ?>
<option value="<?= langues[i][0] ?>" <?= (langues[i][0]==data[0][8]?'selected':'') ?> ><?= langues[i][0] ?></option>
<? } ?>
</select>
<select name="test" onchange="changeColor(this);">
<option value="" disabled selected >Résultat du test</option>
<? for (var i = 0; i < tests.length; i++) { ?>
<option value="<?= tests[i][0] ?>" <?= (tests[i][0]==data[0][9]?'selected':'') ?> ><?= tests[i][0] ?></option>
<? } ?>
</select>
<select name="contact" onchange="changeColor(this);">
<option value="" disabled selected >Qui a pris contact?</option>
<? for (var i = 0; i < contacts.length; i++) { ?>
<option value="<?= contacts[i][0] ?>" <?= (contacts[i][0]==data[0][10]?'selected':'') ?> ><?= contacts[i][0] ?></option>
<? } ?>
</select>
<p><strong>Premier contact</strong></p>
<input type="date" name="D2" value="<?= ((d2=='')?'':d2.getFullYear()+'-'+('0'+(d2.getMonth()+1)).slice(-2)+'-'+('0'+d2.getDate()).slice(-2)) ?>" >
<textarea name="Commentaire_contact" placeholder="Commentaire"><?= data[0][12] ?></textarea>
<p><strong>Deuxième contact</strong></p>
<input type="date" name="D3" value="<?= ((d3=='')?'':d3.getFullYear()+'-'+('0'+(d3.getMonth()+1)).slice(-2)+'-'+('0'+d3.getDate()).slice(-2)) ?>" >
<textarea name="Commentaire_contact" placeholder="Commentaire"><?= data[0][14] ?></textarea>
<p><strong>Troisième contact</strong></p>
<input type="date" name="D4" value="<?= ((d4=='')?'':d4.getFullYear()+'-'+('0'+(d4.getMonth()+1)).slice(-2)+'-'+('0'+d4.getDate()).slice(-2)) ?>" >
<textarea name="Commentaire_contact" placeholder="Commentaire"><?= data[0][16] ?></textarea>
<p><strong>Date du prochain contact</strong></p>
<input type="date" name="Date du prochain contact" value="<?= ((d5=='')?'':d5.getFullYear()+'-'+('0'+(d5.getMonth()+1)).slice(-2)+'-'+('0'+d5.getDate()).slice(-2)) ?>" >
<p><strong>Devis</strong></p>
<p>Date d'envoi</p>
<input type="date" name="Date d'envoi du devis" value="<?= ((d6=='')?'':d6.getFullYear()+'-'+('0'+(d6.getMonth()+1)).slice(-2)+'-'+('0'+d6.getDate()).slice(-2)) ?>" >
<p>Etat</p>
<select name="etatDevis" onchange="changeColor(this);">
<option value="" disabled selected >Etat du devis</option>
<? for (var i = 0; i < etatsDevis.length; i++) { ?>
<option value="<?= etatsDevis[i][0] ?>" <?= (etatsDevis[i][0]==data[0][19]?'selected':'') ?> ><?= etatsDevis[i][0] ?></option>
<? } ?>
</select>
<input type="button" value="Modifier la base de données" onclick="modifier()">
</form>
<script>
function modifier() {
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;
}
var d = new Date()
tab.push(d.toString())
google.script.run.modifierLigne(tab);
}
</script>
</body>
</html>je pense qu'il manque juste les id des zones concernées (qui jusqu'à présent n'étaient pas utiles)
exemple
<select name="prof" id="prof" onchange="changeColor(this);">au lieu de
<select name="prof" onchange="changeColor(this);">puisque le script est getElementById
ou alors il faudrait mettre getElementByName
Je pense qu'il serait possible, intéressant, pertinent de faire un projet d'auto-formulaire qui se créerait automatiquement à partir de paramètres simples
- noms de zones
- noms des placeholder
- type de zone : texte/date/liste
- listes de validation
car dans ton cas où tu as beaucoup de données dates, listes, il y a de quoi se mélanger les pinceaux.
Ah? ok.
Qu'est-ce que tu appelles un auto formulaire?
je pense qu'il manque juste les id des zones concernées (qui jusqu'à présent n'étaient pas utiles)
exemple
<select name="prof" id="prof" onchange="changeColor(this);">au lieu de
<select name="prof" onchange="changeColor(this);">puisque le script est
getElementByIdou alors il faudrait mettregetElementByName
J'ai essayé ByName, puis j'ai changé avec ById en ajoutant id="prof" etc. mais j'ai toujours l'erreur
