Utiliser 2 boutons différents

Résolu/Fermé
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
- 30 janv. 2017 à 11:30
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
- 9 févr. 2017 à 09:15
Bonjour,
J'ai 2 boutons pour afficher un calendrier.
le premier bouton doit me servir à écrire une date dans un input text et le 2è bouton à écrire dans un autre input text
les 2 boutons et les 2 input

Date de début : <INPUT type="text" name="debut" value="" size=9em>
<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonB" onclick="boutonclique('buttonB'),afficher_cal(),voir('entete')";><br /><br />
Date de fin : <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonE" onclick="afficher_cal(),voir('entete')";><br />

la fonction pour créer le calendrier

function afficher_cal(){
var existingTable = document.querySelector('table');
if (existingTable) existingTable.parentElement.removeChild(existingTable);

var ladate = new Date();
var ladatedujour = ladate.getDate();// la date du jour
var lemois = ladate.getMonth() + 1;
var i, c, j;
var row, td, th, cell;
var table = document.createElement('table');
table.id = 'tableCal';
//
// création des têtes de colonnes
//
var thead = table.createTHead();
row = thead.insertRow();
var nomsJours = [ 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di' ];
for (i = 0; i < 7; i++) {
th = document.createElement('th'); // malheureusement, il n’y a pas de méthode insert pour les th(remarque de Watilin)
th.textContent = nomsJours[i];
th.scope = 'col'; // optionnel, pour l’accessibilité (remarque de Watilin)
row.appendChild(th);
}
//
// création du contenu
....
var table = document.getElementById("tableCal");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
tableText(this);
};
}
}
}

la fonction du clic sur les boutons

function boutonclique(id){
var idbouton = id;
// alert(idbouton);
}

la fonction pour écrire dans l'input text

function tableText(tableCell) {
var lejourD = tableCell.textContent;
var lemoisD = parseInt(document.gen.mois_encours.value);
var lanneeD = parseInt(document.gen.annee.value);
var ladatedebut;
if (lejourD < 10) lejourD = '0'+lejourD;
if (lemoisD < 10) lemoisD = '0'+lemoisD;
ladatedebut = lejourD +'/'+lemoisD+'/'+lanneeD;
document.gen.debut.value = ladatedebut;
}

la fonction ci dessus écrit le résultat par défaut dans l'input text debut.

je ne sais pas comment passer l'id du bouton à la fonction tabletext pour écrire dans l'un des 2 input en fonction du bouton cliqué.

merci d'avance


3 réponses

Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
Modifié par Nexii le 30/01/2017 à 15:49
Bonjour,

Tes fonctions appelées depuis l'HTML te permettent d'y introduire des paramètres.
Lorsque tu appelles ta fonction "afficher_cal()", tu peux lui ajouter l'objet en question
afficher_cal(this)
puis dans la fonction récupérer l'ID de l'objet :
function afficher_cal(obj) {
  // code
  var inputId = obj.id;
}
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

30 janv. 2017 à 17:41
Merci pour la réponse.
J'ai bien l'id du bouton dans la fonction affiche_Cal(obj) mais comment je passe l'id à la function tableText(tableCell) puisque c'est là que je vais définir quel bouton est cliqué pour écrire la date dans l'input text.
0
Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
Modifié par Nexii le 31/01/2017 à 09:55
De la même manière, en ajoutant le paramètre..

Ta fonction tableText est appelée dans la fonction affich_cal n'est-ce pas ?

donc :

function afficher_cal(obj) {
  // code
  var inputId = obj.id;
  // code
  tableText(this, inputId);
}
 
function tableText(tableCell, objId) {
  //code
}
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
> Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

31 janv. 2017 à 16:34
Merci. Mais au premier chargement du calendrier : pas de problème il s'affiche

Date de début : <INPUT type="text" name="debut" value="" size=9em>
<input type="button" name="bouton1" value="cal" class='boutonCal' id="1" onclick="afficher_cal(this),voir('entete')";><br /><br />
<span style="font-size:0.7em;">cliquer sur le bouton pour afficher le calendrier</span><br />
Date de fin : <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
<input type="button" name="bouton2" value="cal" class='boutonCal1' id="2" onclick="afficher_cal(this),voir('entete')";><br />

les fonctions

function afficher_cal(obj){
var inputId = obj.id;

var existingTable = document.querySelector('table');
if (existingTable) existingTable.parentElement.removeChild(existingTable);
...
if (inputId === '1'){
document.body.appendChild(table);
}
var table = document.getElementById("tableCal");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
tableText(this,inputId);
};
}
}
}
}
function voir(id){
document.getElementById('entete').style.display = 'inline';
}

Le problème se situe ici. Quand je clique sur les boutons "<" et ">" l'entête avance ou recule bien d'un mois mais le calendrier ne bouge pas
Code HTML

<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
<div id="entete" >
<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
<input type='text' name='an' class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
<input type='button' name='bouton' value='>' onclick='next(gen),Njours(gen)'; class='boutonCal'>
</div>


les fonctions pour avancer ">"

function next(gen){
var numero = parseInt(document.gen.mois_encours.value);
var numerofin = 12;
var an = parseInt(document.gen.annee.value);
if (numero < numerofin){
var numero = ++numero ;
document.gen.mois_encours.value= +numero;
}
else if (numero = numerofin){
document.gen.mois_encours.value= 1;
var an = ++an ;
document.gen.annee.value= +an;
numero = 1;
}
var le_mois =["","janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
var valeur = le_mois[numero];
document.gen.an.value= valeur.concat(' ').concat(+an);
// sera utiliser pour afficher les jours du mois précédent dans le calendrier
var moisavant = parseInt(document.gen.mois_encours.value) ;
moisavant -= 1;
if (moisavant === 0) moisavent = 12;
document.gen.mois_avant.value = moisavant;
target = new Date(an,moisavant,0);
document.gen.pjma.value = target.getDate();
}
function Njours(gen){
var inputId = obj.id;
var mois_js = parseInt(document.gen.mois_encours.value);
var mois = mois_js -1;
var anne_js = parseInt(document.gen.annee.value);
var jour_js = "1";
target = new Date(anne_js,mois_js,0);
nbJour = target.getDate(); // donne le nombre de jours dans le mois sélectionné
document.gen.nbjjs.value = nbJour;
target = new Date(anne_js,mois,1);
var madate = new Date(anne_js,mois_js,1);
var FirstD = target.getDay(madate);
document.gen.premierjourmois.value = FirstD; // donne le 1er jour du mois dimanche=0, lundi=1, mardi=2 ...

afficher_cal(obj);
}


si j'enlève tout ce qui se rapporte au bouton : var inputId = obj.id le calendrier avance ou recule normalement !!
0
Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
31 janv. 2017 à 16:56
Tu fais cela en local ou est-ce hebergé ? j'aimerai travailler sur le code complet..
Sinon tu peux upload une archive sur https://wetransfer.com/ ?
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
> Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

31 janv. 2017 à 17:26
Pour le moment je suis en local. J'intégrerai le calendrier sur le site quand il fonctionnera correctement.
je le charge sur l'adresse indiquée.
merci
0
Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
1 févr. 2017 à 12:16
Voila tu peux trouver ton fichier ici

J'ai mis des commentaires et spécifier ou est le nouveau code (sauf pour l'HTML).
Tu remarqueras que j'ai utilisé jQuery uniquement pour les nouvelles fonctions, je n'ai pas voulu détruire ton code et que tu ne comprennes plus rien.
Attention : la librairie jQuery est hebergé sur internet, pour que ton site fonctionne tu devras avoir accès à internet. Sinon tu télécharge le fichier.js, tu en fais un fichier dans ton dossier de travail et tu fais une balise qui pointe vers celui-ci. Bien charger ce script avant ton script perso :).
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

1 févr. 2017 à 23:44
Je viens de découvrir le message. Je vais regarder cela et déjà merci.
Tu as pu voir que ce n'est pas un code optimisé et pour cause je n'ai aucune formation en PHP, Javascript et autre langage informatique et tout ce que je fais c'est en piochant sur internet et en posant des questions sur les forum comme celui-ci.
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

2 févr. 2017 à 09:45
Je viens de charger les fichiers. C'est bien ce que je voulais faire.J'ai 2 questions :
1/ les boutons que j'avais placés sur la pages index sont devenus inutiles ?
2/ le site est hébergé chez OVH. Cet hébergeur étant l'un des plus importants j'imagine qu'il y a accès à internet. Je vais poser la question.
Encore un grand merci pour toute l'aide.
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

2 févr. 2017 à 10:24
OK Je viens de voir que les boutons n'existent plus .
Par contre il reste une chose qui me gêne beaucoup. Comme je l'avais dit j'ai 2 pages sur lesquelles je vais mettre le script du calendrier. Sur ces 2 pages j'ai un tableau dont les données viennent d'une bdd. Quand l'utilisateur saisit les dates et les valide la bdd est mise jour et j'affiche le tableau à jour. Et le problème est donc que lors d'un clic dans les input le tableau va disparaître.
L'autre problème c'est que je vais avoir besoin d'un bouton pour enregistrer les dates dans la bdd. Quel que soit l'endroit où je place un bouton il arrive entre "l'entête" et le corps du calendrier. Est ce qu'il ne faudrait pas contenir l'entête et le calendrier dans une balise div ?
0
Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
2 févr. 2017 à 13:35
Tu peux essayer pour le DIV qui englobe les calendrier en effet.

En ce qui concerne ton autre problème je ne comprend pas trop ce qui ne va pas..
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
> Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

2 févr. 2017 à 15:53
Sur la 1ère ligne de code ci-dessous j'ai mis une simple table pour tester. Quand je clique sur un input la table s'efface.Sur le site la table que j'ai est complétée au chargement de la page.
Pour l'autre problème, c'est à dire le bouton pour enregistrer les dates dans la base de donnée je l'ai placé après la balise "calendrier" et malgré ça quand le calendrier s'affiche le bouton est entre "l'entête" et le calendrier.

<table><tr><td>toto</td><td>tata</td></tr></table><br />
<div id="calendrier">
<FORM NAME="gen">
<p class="selection">
<span style="text-align:center;">Sélection des dates de disponibilités</span><br /><br />
Date de début : <INPUT class="choseDate tgt" id="startDate" type="text" name="debut" value="" size=9em/> <br/><br/>
Date de fin : <INPUT class="choseDate tgt" id="endDate" type="text" name="fin" value="" size=9em style="margin-left:1.5em;">
</p>
....
<!---date fin pour bdd---> <INPUT type="hidden" name="date_fin" value="">
<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
<div id="entete" class="tgt">
<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
<input type='text' name='an' class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
<input type='button' name='bouton' value='>' onclick='next(gen),Njours(gen)'; class='boutonCal'>
</div>
</FORM>
</div>
<input type = "button" name = "Enreg" value = "Enregistrer">
</body>

Et une autre chose que je viens de voir : si je clique sur les cellules du début du calendrier ou de la fin (les cellules du mois d'avant ou du mois d'après ) je récupère la valeur dans les input. sauf que par exemple si je clique sur la 1ere cellule de février je récupère "30/02/2017". j'ai mais ça dans le css des cellules vides mais ça ne fait rien

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;disabled:disabled;}

J'espère que mes explications sont plus claires.
Je cherche en même temps
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

6 févr. 2017 à 12:58
bonjour,
Comme je l'ai dit ça ne m'intéresse pas de récupérer quelque chose de 'tout cuit' mais je veux faire par moi-même pour apprendre. Mais bien sûr j'ai quand même besoin d'aide!!!

donc dans mon projet la dernière chose qu'il me reste à faire c'est d'afficher un message quand la cellule cliquée ne correspond pas à une cellule où il y a les jours du mois encours.
code css

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;}

le code pour récupérer la cellule cliquée et savoir si elle correspond à un jour du mois en cours

$("#tableCal td").on('click', function () {
// On récupère la cellule cliquée
var clickedCell = $(this);
if ($(this).class === 'couleurvide'){
alert('Cette date ne correspond pas au mois');
}
else {
tableText(clickedCell);
}
});

'couleurvide' est la class attribuée aux cellules des jours qui ne sont pas les jours du mois.
Le if ne fonctionne pas.
0
Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
435
7 févr. 2017 à 10:44
Bonjour,

Oui mais comme tu disais n'être pas arrivé à les faire fonctionné, je te donnais un moyen simple. C'est bien plus formateur de le créer toi-même tu as raison :).

Pour ton problème, si ton élément a plusieurs classe alors l'égalité ne pourra pas fonctionner, et je sais que ton élément possède plus d'une classe !

Tu dois récupérer l'ensemble des classes dans un tableau, puis le parcourir pour matcher celle que tu veux :
var clickedCellId = $(this).id; // Si tes cellules ont un ID, sinon trouve un autre moyen de matcher la ligne du dessous
var classList = document.getElementById(clickedCellId).className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
  if (classList[i] === 'couleurvide') {
      //do something
  }
}


Un petit tips pour tes class/id. En informatique on utilise l'écriture CamelCase. Cela signifie que pour une meilleure lisibilité dans les classes, variables, fonctions, on met des majuscules à tous les mots. Ta classe couleurvide devient alors couleurVide ou CouleurVide.

Bon courage.

Passe le sujet en Résolu lorsque tu auras terminé :).
0
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
> Nexii
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

9 févr. 2017 à 09:15
Merci pour toute l'aide
0