11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je bloque depuis un petit moment la dessus et je ne comprend toujours pas pourquoi, je voudrais que quand je sélectionne une option, en fonction de l'option il enlève un champ input, voici mon code avec mon "select" :

$req = $dbh->query("SELECT * FROM forfaitaire WHERE matricule_v = $visiteur && statut = 'En cours de saise'");
while($donnees = $req->fetch()){
	 $num_fiche = $donnees['num_fiche'];
	 $matricule_v = $donnees['matricule_v'];
	 $date_fiche = $donnees['date_fiche'];
	 $montant = $donnees['montant'];
	 $nature = $donnees['nature_fiche'];
	 $quantite = $donnees['quantite'];
	 $libelle = $donnees['libelle_fiche'];
	 $img_id = $donnees['img_id'];
	 $statut = $donnees['statut'];
	 $num_mission = $donnees['num_mission'];
	 
	echo "<tr><form enctype='multipart/form-data' action='nouvelle-note-de-frais.php' method='POST' id='my_form' ><td>$matricule_v</td> <td><input type='hidden' value='$num_fiche' name='num_fiche' id='num_fiche".$num_fiche."'/>$num_fiche</td> <td><select id='nature".$num_fiche."' name='nature' onchange='afficheimg();'><option value='test'>$nature</option><option value='1'>Kilomètre</option><option value='dejeuner'>déjeuner</option><option value='diner'>diner</option><option value='nuit hotel'>nuit d'hotel</option></select></td> <td><input type='text' value='$montant' id='montant".$num_fiche."' name='montant'/></td> <td><input type='text' id='libelle".$num_fiche."' name='libelle' value='$libelle'/></td> <td><input type='text' size='10px' id='num_mission".$num_fiche."' value='$num_mission' name='num_mission'required></td> <td><div id='afficherimg".$num_fiche."' style='display: block'><input type='file' id='img".$num_fiche."' name='image' accept='image/*/'></div></td> <td><input type='date' onclick='texte.value''' name='date' id='date".$num_fiche."' value='aaaa-mm-jj'/></td> <td><select id='statut".$num_fiche."' name='statut'><option>$statut</option><option>En attente</option></select></td> <td><button class='submit' id='".$num_fiche."'>Valider</button></td></form><td><button class='Supprimer' id='".$num_fiche."'>Supprimer</button></td></tr>";
	
}


et voici mon code javascript :


	function afficheimg() {
var type = document.getElementById('nature').value();
var div = document.getElementById("afficherimg");
if (type == "1") {
div.style="display:none";
} else {
div.style="display:block";
}
}


mais j'ai une erreur qui me dit :
"Uncaught ReferenceError: afficheimg is not defined"

pourtant je l'ai bien défini dans mon select, si quelqu'un a une solution.

Cordialement
Bonjour,

Et vous arrivez à vous y retrouver dans cet amoncellement de code ? On en reparlera dans quelques mois.

Sinon je comprends bien que le parseur ne puisse trouver #afficherimg vu que votre déclaration en php est incorrecte.

En effet dans la ligne suivante il vous manque le guillemet d'ouverture à la déclaration de l'id
<div id='afficherimg"...

qui donne en l'état en html
<div id=afficherimg"...


Vous voyez quand je vous disais qu'on avait du mal à s'y retrouver dans votre code ?!

Rendez-vous service, pensez à l'indentation et aux retours à la ligne.


Cordialement,
j'ai bien vérifier et il ne me manque pas la guillemet d'ouverture :


echo "<tr><form enctype='multipart/form-data' action='nouvelle-note-de-frais.php' method='POST' id='my_form' ><td>$matricule_v</td>
	<td><input type='hidden' value='$num_fiche' name='num_fiche' id='num_fiche".$num_fiche."'/>$num_fiche</td>
	<td><select id='nature".$num_fiche."' name='nature' onchange='afficheimg(this.select);'><option value='test'>$nature</option><option value='1'>Kilomètre</option><option value='dejeuner'>déjeuner</option><option value='diner'>diner</option><option value='nuit hotel'>nuit d'hotel</option></select></td>
	<td><input type='text' value='$montant' id='montant".$num_fiche."' name='montant'/></td>
	<td><input type='text' id='libelle".$num_fiche."' name='libelle' value='$libelle'/></td>
	<td><input type='text' size='10px' id='num_mission".$num_fiche."' value='$num_mission' name='num_mission'required></td>
	<td><div id='afficherimg' style='display: block'><input type='file' id='img".$num_fiche."' name='image' accept='image/*/'></div></td>
	<td><input type='date' onclick='texte.value''' name='date' id='date".$num_fiche."' value='aaaa-mm-jj'/></td> <td><select id='statut".$num_fiche."' name='statut'><option>$statut</option><option>En attente</option></select></td>
	<td><button class='submit' id='".$num_fiche."'>Valider</button></td></form><td><button class='Supprimer' id='".$num_fiche."'>Supprimer</button></td></tr>";
	

Modifié par vinil (11 Feb 2017 - 14:28)
vinil a écrit :
j'ai bien vérifier et il ne me manque pas la guillemet d'ouverture :


echo "&lt;tr&gt;&lt;form enctype='multipart/form-data' action='nouvelle-note-de-frais.php' method='POST' id='my_form' &gt;&lt;td&gt;$matricule_v&lt;/td&gt;
	&lt;td&gt;&lt;input type='hidden' value='$num_fiche' name='num_fiche' id='num_fiche".$num_fiche."'/&gt;$num_fiche&lt;/td&gt;
	&lt;td&gt;&lt;select id='nature".$num_fiche."' name='nature' onchange='afficheimg(this.select);'&gt;&lt;option value='test'&gt;$nature&lt;/option&gt;&lt;option value='1'&gt;Kilomètre&lt;/option&gt;&lt;option value='dejeuner'&gt;déjeuner&lt;/option&gt;&lt;option value='diner'&gt;diner&lt;/option&gt;&lt;option value='nuit hotel'&gt;nuit d'hotel&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
	&lt;td&gt;&lt;input type='text' value='$montant' id='montant".$num_fiche."' name='montant'/&gt;&lt;/td&gt;
	&lt;td&gt;&lt;input type='text' id='libelle".$num_fiche."' name='libelle' value='$libelle'/&gt;&lt;/td&gt;
	&lt;td&gt;&lt;input type='text' size='10px' id='num_mission".$num_fiche."' value='$num_mission' name='num_mission'required&gt;&lt;/td&gt;
	&lt;td&gt;&lt;div id='afficherimg' style='display: block'&gt;&lt;input type='file' id='img".$num_fiche."' name='image' accept='image/*/'&gt;&lt;/div&gt;&lt;/td&gt;
	&lt;td&gt;&lt;input type='date' onclick='texte.value''' name='date' id='date".$num_fiche."' value='aaaa-mm-jj'/&gt;&lt;/td&gt; &lt;td&gt;&lt;select id='statut".$num_fiche."' name='statut'&gt;&lt;option&gt;$statut&lt;/option&gt;&lt;option&gt;En attente&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;
	&lt;td&gt;&lt;button class='submit' id='".$num_fiche."'&gt;Valider&lt;/button&gt;&lt;/td&gt;&lt;/form&gt;&lt;td&gt;&lt;button class='Supprimer' id='".$num_fiche."'&gt;Supprimer&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
	

Alors il faudra vérifier un peu mieux...
En utilisant un éditeur XML ont se rend compte qu'il y a un problème de délimiteur sur la valeur ci-dessous :
name='num_mission'required>

Je suppose qu'il s'agit de l'attribute @required en HTML5, donc ne requerrant pas forcément une syntaxe nom='valeur', mais un espacement ne serait peut-être pas superflu.
En effet, pardon. Je me suis fais trompé par cette alternance de guillemets simples et doubles qui sont utilisés de façon radicalement différente de mes habitudes.
Modifié par Greg_Lumiere (11 Feb 2017 - 14:52)
Greg_Lumiere a écrit :
En effet, pardon. Je me suis fais trompé par cette alternance de guillemets simples et doubles qui sont utilisés de façon radicalement différente de mes habitudes.

Pô grave... on se fait tous un jour avoir par ces fichus guillemets / apostrophes.
sepecat a écrit :

Pô grave... on se fait tous un jour avoir par ces fichus guillemets / apostrophes.
Voici qui se veut rassurant.

En tout cas j'en ai tiré leçon (je ne parle pas d'aujourd'hui mais dans mes prod persos). J'ai commencé comme beaucoup en produisant du code 'dégueulasse' (je ne vois pas d'autre terme, qu'en dit la censure ?) et m'évertue maintenant à maintenir une excellente lisibilité en indentant et espacement mes contenus, en les commentant et séparant scrupuleuse les différents langages.

Visiblement l'auteur du sujet n'en n'est pas encore à ce stade Smiley cligne

Certes, ça ne résout pas le problème... mais ça aide au debuggage Smiley langue
Modifié par Greg_Lumiere (11 Feb 2017 - 18:01)
Greg_Lumiere a écrit :
Voici qui se veut rassurant.
En tout cas j'en ai tiré leçon (je ne parle pas d'aujourd'hui mais dans mes prod persos). J'ai commencé comme beaucoup en produisant du code 'dégueulasse' (je ne vois pas d'autre terme, qu'en dit la censure ?) et m'évertue maintenant à maintenir une excellente lisibilité en indentant et espacement mes contenus, en les commentant et séparant scrupuleuse les différents langages.
Visiblement l'auteur du sujet n'en n'est pas encore à ce stade Smiley cligne
Certes, ça ne résout pas le problème... mais ça aide au debuggage Smiley langue

Perso, poursuivant mon travail sur le générateur HTML, j'ai eu à faire un choix en ce qui concerne l'utilisation des guillemets ou des apostrophes pour les valeurs d'attributs.
Le problème se posait notamment lorsque le délimiteur choisi est présent dans la valeur d'attribut.
Solution retenue :
a) au niveau du projet web, l'utilisateur choisit s'il veut des guillemets ou des apostrophes comme délimiteurs
b) au niveau d'un attribut HTML, le générateur convertit automatiquement en entité (hexa ou décimale) tout caractère présent dans la valeur à sérialiser
Plus aucun problème. C'est le générateur qui bosse à ma place et me garantit toute la rigueur nécessaire Smiley biggrin ...
Cerise sur le gâteau, étant en mesure de détecter le doctype de la page HTML, le générateur adoptera un mode strict ou non (ex. absence de valeur sur les attributs booléens tels que @disabled) en fonction du choix fait au niveau projet.
C'est vraiment sympa quand tout fonctionne.
En ce moment, j'intègre Bootstrap dans le projet et c'est plutôt fun de creuser un peu ce framework (merci au passage à tous ceux qui ont bien voulu laisser sur le web des tutoriels sur le sujet).
A priori l'erreur concerne l'appel à la fonction afficheimg(), pas la valeur concaténé afficherimg. Donc vérifier que le script est bien inclus dans la page.

Aussi :


...<div id='afficherimg".$num_fiche."'


donnera afficherimg+quelquechose donc ceci ne fonctionnera jamais :


document.getElementById("afficherimg");


Il faut faire une effort sur le nommage des variables/fonctions et éviter de concaténer autant de code car tu te crées beaucoup de problèmes en codant comme cela.
Greg_Lumiere a écrit :
@Sepecat: Quelle souplesse, admirable !

Pour être honnête, ce sont les acrobates au cirque qui sont vraiment souples Smiley cligne ...
Niveau générateur je me contente de privilégier la sécurité et la fiabilité du résultat, en essayant d'envisager tous les cas de figure autorisés par les spécifications et/ou rendus nécessaires par les contraintes techniques.
Je viens ainsi de passer deux jours de développement rien que pour traiter le cas des favicons...
A priori simple comme tout, mais si on creuse, et qu'on veut gérer les différents formats graphiques (png, jpeg, ect.) ainsi que les dimensions, bin y a du turf et du jus de ciboulot à produire.
Par contre, une fois programmé, quel fun Smiley smile .
Ceci dit, pour arriver à un produit réellement mature, c'est a minima encore un ou deux ans de boulot devant moi... mais les différents blocs commencent à bien s'emboîter et le résultat me plaît bien.
Je devrais actualiser sous peu mon portail Thot pour que le principe de ce générateur soit plus concret.
Les contacts à qui j'ai pu en parler autour de moi commencent également à tendre l'oreille, surtout en milieu professionnel où la notion de budget signifie quelque chose Smiley murf ...
Comme je l'indiquais encore cette semaine à l'un de mes collègues demandeur d'infos, je cherche sur le "ouaibe" un outil faisant la même chose, de façon aussi large et, pour l'instant, je n'ai rien trouvé de similaire.
Du générateur HTML, ça ne manque pas.
A contrario, du "qui fait du PHP, du Java, du Bootstrap, du Wordpress, du etc." à partir d'une même définition de projet par composants "logiques", je n'ai pas encore déniché la perle rare.