[Résolu] Récuperer une valeur lors d'une selection d'un menu déroulant

Bonjour,

Comme l'indique le sujet, je voudrais récupérer des valeurs d'une sélection de menu déroulant.
Cependant, je n'arrive pas à conclure...

Le HTLM :

<fieldset>
	<legend>% d'arôme concentré</legend>
	<div id="controlgroup">
		<select onChange="arome11()" name="id_arom" id="arome12">
			<option value="15">814</option>
			<option value="25">Cloud Vapor</option>
			<option value="5">De la crème Paris</option>
			<option>Diy N' Vape</option>
			<option>Halo</option>
			<option>Juice N' Vape</option>
			<option>Make It</option>
			<option>Maw !</option>
			<option>Nuages des Iles</option>
			<option>Revolute</option>
			<option>The FUU</option>
			<option>Supervape</option>
			<option>Survival</option>
			<option>T-Juice</option>
			<option>Vampire Vape</option>
			<option>Vape Institut</option>
			<option>Vape or Diy</option>
		</select>
		
		<input id="arome" name="id_arom" type="text" min="0" max="25">		
	</div>
</fieldset>

Le JS :

/*Valeur du % par défaut */
function arome11(){
var valeur_select = document.getElementById('arome12').options[document.getElementById('arome12').selectedIndex].value;
document.getElementById('id_arom').value = valeur_select;}

Quelqu'un sait où je fais l'erreur ?

A priori tu as aussi un soucis sur ces 2 lignes

<input id="[b]arome[/b]" name="id_arom" type="text" min="0" max="25">	

et

document.getElementById('[b]id_arom[/b]').value = valeur_select;

Le lien se fait entre les 2 éléments via les valeurs que j'ai mis en gras, en l'état ce n'est pas la même valeur du coup il ne peut pas écrire dans le champs prévu.
Edit : je viens de voir qu'il n'y a pas de gras dans la balise code -_- du coup ça rajoute des balises [ b ] et [ /b ] au lieu de mettre en gras

Et en remarque complémentaire :
C'est bizarre que l'on puisse écrire dans le champs qui va se remplir lors du select.
Il faut aussi prévoir ce qui se passe lorsque l'utilisateur est satisfait par la 1ere valeur du select et qu'il n'y aura pas de onchange.
Il faudrait que tu essayes de te fixer des conventions d’écritures pour tes id et tes variables, ce n'est pas super en l'état
Modifié par Mathieuu (24 May 2019 - 10:25)

Bonjour et merci pour votre retour !
@JENCAL, dans mon cas, cela ne fonctionne malheureusement pas...

@Mathieuu
Le principe est que l'utilisateur ai une valeur par défaut lorsqu'il choisis une marque, mais qu'il puisse modifier cette valeur dans le même champs selon ses besoins. Je ne veux pas rentrer dans le détail de ce choix, mais si tu le souhaite, je pourrais t'expliquer.

Voici les modifications apportées :
HTML :

<select onChange="arome11()" id="arome12">

JS :

/*Valeur du % par défaut */
function arome11(){
var valeur_select = document.getElementById('arome12').options[document.getElementById('arome12').selectedIndex].value;
document.getElementById('arome').value = valeur_select;}

Salut

Je pense que tu te prend un peu trop la tête et que tu devrais écouter la proposition de JENCAL

Deplus il y a un soucis de déclaration de fonction avec le onchange direct dans le html selon ou tu place le Js. Préfère un EventListener

var arome12 = document.getElementById('arome12');
arome12.addEventListener("change", arome11);

function arome11() {
document.getElementById('arome').value = arome12.value;
}

https://jsfiddle.net/undless/4qtah6d2/

Comment ça cela ne marche pas dans ton cas ?

Normalement tu dois pouvoir transformer

var valeur_select = document.getElementById('arome12').options[document.getElementById('arome12').selectedIndex].value;

en

var valeur_select = document.getElementById('arome12').value;

et encore simplifier pour faire directement :

document.getElementById('arome').value = document.getElementById('arome12').value;

Du coup ta fonction final est relativement simple :

function arome11(){
document.getElementById('arome').value = document.getElementById('arome12').value;
}

Idéalement il ne reste plus qu'à lui trouver un vrai nom qui a du sens / décrit vaguement ce qu'elle fait (et aussi un peu pareil avec les noms des ids)


Je me suis fais grillé
Modifié par Mathieuu (24 May 2019 - 11:37)

Mathieuu a écrit :
Je me suis fais grillé

Hahaha zut désolé Mathieuu j'ai pas vu que tu étais dans le coin. Mais c'est plus détaillé en tout cas !

ajja17r a écrit :
Bonjour et merci pour votre retour !
@JENCAL, dans mon cas, cela ne fonctionne malheureusement pas...

https://codepen.io/JUSEN/pen/dEmRxb

il faut tester pour que ça marche hein...
je sais pas comment tu as fait pour que ça ne marche pas.

Messieurs,

Je vous remercie pour votre patience ! Mais je dois être complètement à côté de la plaque (ha bon ? lol)

@JENCAL : j'ai testé rassure toi

Comme tu le dis Laurent, je me prends un peu trop la tête... Ceci étant, pour me prendre la tête un chouya moins , je copie colle vos propositions, comme cela pas de risque d'erreur de frappe !

Mais (car oui, il y a un mais), étrangement ça ne fonctionne pas ....

Quand je le teste dans un nouveau fichier ça fonctionne, dans mon fichier ça ne fonctionne pas !

Que je le mette en script en bas de mon index html (avant la fermeture de body), ou directement dans mon fichier JS qui n'est rien d'autre que le jsquery-ui.js fourni par défaut par jquery, rien ne s'affiche.

[précédent en HTML]
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/calculateur.js"></script>
<script>


//Bouton A propos de la nicotine
$( "#dialog" ).dialog({
	autoOpen: false,
	width: 400,
	buttons: [
		{
			text: "Ok",
			click: function() {
				$( this ).dialog( "close" );
			}
		},
		
	]
});
// Lien d'ouverture pour A propos de la nicotine
$( "#dialog-link" ).click(function( event ) {
	$( "#dialog" ).dialog( "open" );
	event.preventDefault();
});

//Bouton Radio Nicotine
$( "#radioset" ).buttonset();

//Affichage choix d'arome
$( "#controlgroup" ).controlgroup();

//Affichage % choix d'arome
$( "#arome" ).spinner();

//Affichage ml base finale
$( "#base_finale" ).spinner();

//Valeur du % par défaut
var arome12 = document.getElementById('arome12');
arome12.addEventListener("change", arome11);

function arome11() {
document.getElementById('arome').value = arome12.value;
}

</script>
</body>
</html>

Alors que le jsfiddle proposé par Laurent fonctionne parfaitement...

Mais bon sang où est mon erreur... (j'ai de moins en moins de cheveux )

Voici la version en ligne, peut être verrez vous quelque chose que je ne vois pas

https://cazavape-diy.yj.fr/calculateur/index.html
Modifié par ajja17r (24 May 2019 - 13:43)

J'ai l'impression que c'est lié au reste du code de ta page
Il y a un habillage autour de ton select qui fait que l'on ne clique pas directement sur le select mais sur un span à la con. J'ai l'impression que du coup cela ne déclenche pas l'événement de onchange

+1 pour Mathieuu

Tu as une surcouche (jQuery UI ??) qui met ton select en display none et qui le remplace par des span...

Ah! jquery UI

du coup

$("#arome12-menu li").on("click", function(){ 
  var text = $(this).text();
  var element = $('#arome12').find('option:contains('+text+')').val();
  alert(element); // ici tu as la valeur extact de l'option. celle qui est dans "value=" dans les attributs de <option> et pas celle qui se trouve entre <option></option> qui est .text()
});

Tu dis : Ceci étant, pour me prendre la tête un chouya moins , je copie colle vos propositions, comme cela pas de risque d'erreur de frappe !

Et justement, le copier coller, c'est un fléau. il faut éviter un maximum.
D'une, avec du copié coller on retient pas (je parle perso)
Deux, les mecs qui ont fait le code ne sont pas dans l'exact même contexte que toi, et ne connaissent pas les tenant et aboutissant de ton projet, ni même les détails technique.

C'est au mec (celui qui copie colle) d'adapter la solution à son propre code. sinon c'est l'echec.
Modifié par JENCAL (24 May 2019 - 15:15)

_laurent a écrit :
+1 pour Mathieuu

Tu as une surcouche (jQuery UI ??) qui met ton select en display none et qui le remplace par des span...
upload/1558701395-42161-egarette.png

C'est moche, mais si tu veux un "champ de recherche" ou même le personnalisé visuellement, tu ne peux pas sur une balise <select>.....

Que de talent ! On ne peut pas lutter

@JENCAL : tu as tout à fait RAISON ! Mais bien entendu avant le copier/coller, je vérifie hein ! De l'aide OK, mais la bêtise de votre obligé j'évite (bien que j'ai l'impression d'être un peu bête sur ce coup )
De plus, ta proposition (à adapter j'ai bien compris ) je la mets plutôt dans la partie script de mon HTML ou dans mon jsquery-ui.js ?

@Mathieuuu et _Laurent : c'est exactement ça ! Il fait appel à un jquery-ui.js stocké à part. D'où mon lien vers le test pour vous permettre de voir l'intégralité du code.

le code que je t'ai partagé (je l'ai testé sur ton site), tu le met à la toute fin et ce qu'il y a dans le "alert" tu en fais ce que tu veux
Il ne faut "généralement" pas modifié les fichiers de lib. jqueryUI faut pas toucher ^^
Tu devrais te faire un fichier js.js que tu appel en dernier élément de ton <body>

Et comme c'est du Jquery il faut pas oublier de mettre document.ready
Modifié par JENCAL (24 May 2019 - 15:32)

Ça marche ! Je regarde ça quand j'ai quelques minutes (heures ?) devant moi et je vous tiens informé !

En tout cas, merci pour votre soutien !

Bonjour,

De retour au boulot

@JENCAL : cela fonctionne ! Cependant, alert (et c'est logique) m'affiche un pop up avec la valeur indiquée... Pour ma part, je voudrais qu'il l'affiche dans l'emplacement prévu à cet effet.

Où est-ce que je me plante ?

Après plusieurs tentatives, ça fonctionne parfaitement ! (mis avant la balise </body>)

$("#arome12-menu li").on("click", function(){ 
  var text = $(this).text();
  var element = $('#arome12').find('option:contains('+text+')').val();
  $('#arome').val(element);

});

Vous en pensez quoi (oui je sais ça marche donc je devrais être satisfait, mais sait-on jamais)
Modifié par ajja17r (25 May 2019 - 11:24)

Je ne vois rien à redire.

Parfait ! Je passe donc ce sujet en résolu et remercie l'ensemble des personnes qui m'ont guidé !