Partage
  • Partager sur Facebook
  • Partager sur Twitter

récupérer valeur d'un select javascript

Sujet résolu
17 août 2016 à 18:11:46

Bonjour à tous,

j'ai un petit problème à vous soumettre : je ne sais pas pourquoi, mais je ne parvient pas à récupérer la valeur d'un select en javascript. Le pire, c’est que j'ai un autre select à côté qui fonctionne lui correctement.

Le select en question :

<select id="types[4][zone_climatique]19" name="types[4][zone_climatique]" onchange="simule(this);remplissageAuto('types[4][zone_climatique]19');" class="BAR-TH-104" style="display: inline; border: 1px solid rgb(224, 224, 224); cursor: default;">
    <option value="" style="cursor: default;"></option>
    <option value="1" selected="" style="cursor: default;">01 Ain</option>
    <option value="2" style="cursor: default;">02 Aisne</option>
    <option value="3" style="cursor: default;">03 Allier</option>
    <option value="4" style="cursor: default;">04 Alpes-de-Haute-Provence</option>
    <option value="5" style="cursor: default;">05 Hautes-Alpes</option>
    <option value="6" style="cursor: default;">06 Alpes-Maritimes</option>
</select>

et lorsque je fais un alert un javascript comme ci-dessous, aucune valeur ne s'affiche : 

function remplissageAuto(alias) {
alert(document.getElementById(alias).value);
}

Auriez-vous une idée ?

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
17 août 2016 à 22:04:48

Bonjour,

Pour récupérer la valeur d'un select, il faut que tu créer une fonction qui sera appelé lors de l'événement onchange() de ton select. C'est cette balise qui contiendra la nouvelle valeur choisie, les option ne sont là que pour attribuer les valeur à ton select.

Dans ton JavaScript, tu vas devoir récupérer l'élément correspondant à ton select. Donc l'idéal, c'est de passer par un getElementById(). Une fois que c'est fait, tu peux récupérer la valeur d'un indice en utilisant la méthode .selectedIndex. La méthode select.options contient un tableau qui correspond à chaque option, tu vas devoir chercher l'indice correspondant dans ce fameux tableau.

Document de démonstration.

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 10:05:56

Bonjour AminNairi,

en fait ce que je cherche à récupérer est bien la value de chaque option. Dans ton exemple, si l'utilisateur choisit "Mazda 3", je veux avoir la valeur "mazda3". 

est-ce-qu'un getElementById(alias).value ne suffit pas ? ca fonctionne sur un autre select de la même page mais pas sur celui dans l'exemple.

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
18 août 2016 à 10:36:56

En fait, si la fonction ne se déclenche pas pour la première valeur, c'est parce que l'événement onchange ne s'est pas déclenché. En effet, il n'y a pas eu de onchange, de changement donc car la première valeur mazda3 est déjà enregistré dans le select.

Une solution pour récupérer d'entrée de jeux la première valeur (si l'utilisateur choisi la Mazda 3) serait de créer une fonction anonyme qui sera lancée quand ton document sera chargé et qui appelera une première fois ta fonction :

( function() {

    choix();

})();

Du coup ça donne ça (j'utilise désormais le console.log() pour que ça soit moins intrusif).

Tu remarqueras qu'au début, sans séléction, c'est mazda3 qui est affiché dans la console. C'est ce que je t'avais dit : en fait le select va prendre la première valeur dès le début. Donc hypothétiquement, tu pourrais envoyer ton formulaire sans même sélectionner une autre valeur.

Après bien sûr, tu pourrais retrouver la première valeur avec un document.getElementById("identifiantSelect").value; mais ma fonction le fait déjà (à peu de choses près) donc je la réutilise. Tu t'organises comme tu le souhaites. Le plus important, c'est cette fonction anonyme pour pouvoir récupérer la première valeur si tu utilise une fonction. Tu peux aussi  ajouter la ligne que tu as donné directement. Ça revient à peu près au même.

-
Edité par Anonyme 18 août 2016 à 10:41:06

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 11:21:25

voici petite fonction maison utile pour  récupérer les valeurs d'une balise formulaire select

fonction Recup_select_info(objet,type de recherche) voir exemple

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>test select</title>
</head>

<body>
<script id="jsc_insert" type="text/javascript" language="javascript">
function Recup_select_info(obj,choix_rech){
    var idx = obj.selectedIndex;
    if((choix_rech) && (choix_rech == 'valeur')){ return obj.options[idx].value;} // récupère valeur du select
    else if((choix_rech) && (choix_rech == 'texte')){ return obj.options[idx].innerHTML;} // récupère le contenu html du select
    else{ return idx;} // récupère l'index de position dans le tableau select
}

function remplissageAuto(obj) {
	var valeur_alias = Recup_select_info(obj);
	valeur_alias += '\n\n'+Recup_select_info(obj,'valeur');
	valeur_alias += '\n\n'+Recup_select_info(obj,'texte');
	alert(valeur_alias);
}
</script>

<select id="test select" onchange="remplissageAuto(this);" style="display: inline; border: 1px solid rgb(224, 224, 224); cursor: default;">
    <option value="" style="cursor: default;"></option>
    <option value="01 NOM" selected="" style="cursor: default;">Votre nom</option>
    <option value="02 PRENOM" style="cursor: default;">Votre prénom</option>
    <option value="03 ADRESSE" style="cursor: default;">Votre adresse</option>
    <option value="04 LOCALITE" style="cursor: default;">Votre localité</option>
    <option value="05 CP" style="cursor: default;">Votre code postale</option>
    <option value="06 TELEPNONE" style="cursor: default;">Votre telephone</option>
</select>

<br /><br />

<select id="types[4][zone_climatique]19" name="types[4][zone_climatique]" onchange="remplissageAuto(this);" class="BAR-TH-104" style="display: inline; border: 1px solid rgb(224, 224, 224); cursor: default;">
    <option value="" style="cursor: default;"></option>
    <option value="1" selected="" style="cursor: default;">01 Ain</option>
    <option value="2" style="cursor: default;">02 Aisne</option>
    <option value="3" style="cursor: default;">03 Allier</option>
    <option value="4" style="cursor: default;">04 Alpes-de-Haute-Provence</option>
    <option value="5" style="cursor: default;">05 Hautes-Alpes</option>
    <option value="6" style="cursor: default;">06 Alpes-Maritimes</option>
</select>

</body>

</html>



  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
18 août 2016 à 14:03:54

CedricDeMartin a écrit:

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Cette forme est obsolète si tu utilise le <!DOCTYPE html>. Tu peux la remplacer par :

<meta charset="UTF-8" />

Sans le moindre souci de compatibilité inter-navigateurs. Pareil pour tous tes attributs type="...".

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 14:52:46

Merci pour votre aide. Je parviens maintenant à récupérer la valeur de mon select sur les départements en utilisant la fonction de CedricDeMartin. Mais je dois vraiment avoir un problème sur mon select, car je ne parviens pas à modifier un select identique situé plus loin (avec un id différent bien sûr).

Si je veux attribuer à un select la valeur d'un autre select, un simple 

document.getElementById('types[4][type_logement]21').value = '1';

devrait suffire non ?

Voici où j'en suis dans am fonction js :

function remplissageAutoSelect(valeur,alias) {
        var valeur_this = Recup_select_info(valeur);

        fichierType = alias.substring(0,alias.length -2);

        taille  = alias.length - 2;
        var arreteType = alias.substr(taille, 2);        
    	

    	if (arreteType == 19) {
    		if(document.getElementById(fichierType+20)) {
                document.getElementById('types[4][type_logement]21').value = valeur_this;
            }
    	}
    }



  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 15:47:11

dans le fichier que je t'ai donner ajout ce qui suit et dit moi si ca convient

dans la balise script met

function modif_select(obj){
	obj.options[1].value = '00 SURNOM';
	obj.options[1].innerHTML = 'Votre surnom';
} 


dans le code html met le boutton

<input type="button" onclick="modif_select(document.getElementById('test select'))" value="modif select"/>

'obj' c'est objet récupérer dans onclick

tien moi au courant

-
Edité par CedricDeMartin 18 août 2016 à 15:48:08

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 17:07:51

c'est bon, je parviens maintenant à récupérer la valeur d'un select et à l'affecter à un autre select. merci à tous les 2 pour votre aide.

Une dernière question pour vous embêter : 

J'ai 3 input avec le même name. Le contenu de ces input est modifié dynamiquement par javascript (comme vu dessus) pour que chaque input ait le même contenu. Mais lorsque j'enregistre mon formulaire, il n'enregistre la valeur que si je remplis le dernier input. Si je remplis le 1er ou le 2e, le champ du 3e prend la bonne valeur mais ne s'enregistre pas.

Le .value javascript ne remplit pas correctement l'input pour enregistrement ?

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 17:17:47

explique s'en plus car voit pas tres bien ce que tu veux faire

  • Partager sur Facebook
  • Partager sur Twitter
18 août 2016 à 17:22:47

J'ai oublié de le faire dans le feu de l'action, mais je ne vous ai pas remercié pour votre aide :

Merci à vous deux, j'ai enfin réussi à régler ce problème ! Sujet résolu !

-
Edité par Cby 6 septembre 2016 à 10:38:55

  • Partager sur Facebook
  • Partager sur Twitter
30 août 2023 à 13:27:29

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)