Problème récupération valeur d'un select

Bonjour,

Dans le cadre d'un projet d'une appli mobile qui propose de la musique en fonction de l'humeur et d'un genre de musique (grâce à l'API Gracenote et l'API Deezer), je rencontre un problème au niveau de mes listes de choix.

L'ID et le nom des humeurs ainsi que ceux du genre musical sont en base de donnée.

Voici mon code html:

<form id="genre_mood" name="genre_mood" method="post" action="#playlist">   
                <select name="select-custom-20" id="select-custom-20" data-native-menu="false" data-theme="b" onchange="getMood(this)">
                        <option selected>Sélectionner votre humeur</option>
                        <?php
                            $query = 'Select * from olivierP_Gracenote_mood';
                            $stmt = $pdo->prepare($query);
                            $stmt->execute();
                            $nbrows = $stmt->rowCount();
                            $mood = $stmt->fetchAll();
                foreach ($mood as $moods) {?>
                <option class="mood" value="<?= $moods['mood_id']?>"><?= $moods['mood_name'] ?></option>;
                <?php
                } ?>
                </select>
                <br />
                <select name="select-custom-24" id="select-custom-24" data-native-menu="false" data-theme="b" onchange="getGenre(this)">
                        <option>Sélectionner votre genre</option>
                        <?php
                $query = 'Select * from olivierP_Gracenote_genre';
                $stmt = $pdo->prepare($query);
                $stmt->execute();
                $nbrows = $stmt->rowCount();
                $genres = $stmt->fetchAll();
                foreach ($genres as $genre) {?>
                    <option value="<?= $genre['genre_id']?>"><?= $genre['genre_name'] ?></option>;
                <?php
                } ?>
                    </select>
                <br/>
                <input type="submit" value="Go">
             </form>

et voici le bout de code JS qui va avec :

<script>
    function getMood(mood) {
        var $moodJs = mood.value;
        console.log($moodJs);
    }

    function getGenre(genre) {
        var $genreJs = genre.value;
        console.log($genreJs);
    }


</script>

Le problème actuel est qu'en sélectionnant une valeur dans mes deux listes de choix, un <span>valeur du champ</span> est généré avant les balises select. J'essaye de récupérer les ID pour pouvoir les traiter dans un fichier php ensuite.

Auriez-vous une idée de ce que je fais de traver ?

PS: le code JS ici présent me permet de vérifier que je récupère bien l'ID des valeurs que je souhaite.
Modifié par nek0 (31 Jan 2015 - 16:55)

Pour info, j'ai trouver une solution "Sparadrap"

Code HTML:

<select name="select-custom-20" id="select-custom-20" data-native-menu="false" data-theme="b" onchange="remplir(this.value,true)">
                        <option selected>Sélectionner votre humeur</option>
                        <?php
                $query = 'Select * from olivierP_Gracenote_mood';
                $stmt = $pdo->prepare($query);
                $stmt->execute();
                $nbrows = $stmt->rowCount();
                $mood = $stmt->fetchAll();
                foreach ($mood as $moods) {?>
                    <option class="mood" value="<?= $moods['mood_id']?>"><?= $moods['mood_name'] ?></option>;
                <?php
                } ?>
            </select>
            <br />
                <select name="select-custom-24" id="select-custom-24" data-native-menu="false" data-theme="b" onchange="remplir(this.value,false)">
                        <option>Sélectionner votre genre</option>
                        <?php
                $query = 'Select * from olivierP_Gracenote_genre';
                $stmt = $pdo->prepare($query);
                $stmt->execute();
                $nbrows = $stmt->rowCount();
                $genres = $stmt->fetchAll();
                foreach ($genres as $genre) {?>
                    <option value="<?= $genre['genre_id']?>"><?= $genre['genre_name'] ?></option>;
                <?php
                } ?>
                    </select>
            <form name="genre_mood" method="post" action="traitement.php"> 
                <input id="submit_mood" type="text" value="" />
                <input id="submit_humeur" type="text" value="" />
                <br/>
                <input type="submit" name="ok">
            </form>

J'ai donc déplacé mes balises form autour de deux champs texte qui seront caché via CSS puis j'ai écrit une nouvelle fonction qui récupère la valeur de chaque liste et qui remplit les champs textes automatiquement.

<script>
    var liste1 = ""; 
    var liste2 = "";
    function remplir(valeur, first) { // La fonction
        if (first) { // Si c'est la valeur de la première liste
            liste1 = valeur; // on l'enregistre dans liste1
        } else { // si c'est la deuxième
            liste2 = valeur; // on l'enregistre dans liste2
        }
        document.getElementById("submit_mood").setAttributes('value', liste1);
        document.getElementById("submit_humeur").setAttributes ('value', liste2);
    }
</script>

Ce sont donc ces 2 champs qui seront soumis et traité.
Bon, ça reste moche mais je ne trouve pas d'autre solution pour mon problème précedent sinon
Modifié par nek0 (31 Jan 2015 - 19:03)