Recupération valeur slider range jQueryUI

Par Apo, il y a 14 ans

PHP

Bonjour à tous,

Tout d’abord, je m'excuse si la section du forum n'est pas la bonne, j'avais un doute entre PHP ou Jquery...

Je m'occupe de la refonte d'un site internet pour une boite automobile de véhicules neufs et d'occasion et j'ai proposé sur ma maquette de pouvoir récupérer un intervalle pour le kilométrage et un autre pour le budget du visiteur. Tout cela dans un formulaire.
Pour l'installation de ce slider "range", j'ai opté pour celui de jQuery UI qui est vraiment complet et plutôt facile à installer et customiser, mais quand il s'agit de faire un peu de développement JS, je me retrouve perdu dans le peu de connaissance que je possède pour ce langage...

Je me retrouve donc avec les slider fonctionnels mais je ne sais absolument pas comment je peux récupérer les valeurs (les 2 différentes par slider vu que c'est un intervalle). Le second soucis est la cible du formulaire, en effet ma société utilise un prestataire appelé PlanetVO pour gérer leur stock et ont donc des champs de recherche bien défini, je ne peux pas mettre un nom d'input au hasard.

En gros, PlanetVO récupère par method="POST" des champs appelés "V_KMMin", "V_KMMax" etc. qui sont à la base de simple input texte.
Comment faire pour que les limites données avec le slider soit récupérable avec PHP et reconnaissable par PlanetVO?

Voici le code utilisé:
Pour le JS:

<script type="text/javascript">
    $(function() {
        $( "#range-km" ).slider({
            range: true,
            min: 0,
            max: 200000,
            values: 20000, 140000 ],
            slide: function( event, ui ) {
                $( "#amount-km" ).val( ui.values 0 ] + "km à " + ui.values 1 ] + "km" );
            }
        });
        $( "#amount-km" ).val( $( "#range-km" ).slider( "values", 0 ) + "km à " + $( "#range-km" ).slider( "values", 1 ) + "km" );
    });
    $(function() {
        $( "#range-euro" ).slider({
            range: true,
            min: 0,
            max: 40000,
            values: 0, 40000 ],
            slide: function( event, ui ) {
                $( "#amount-euro" ).val( ui.values 0 ] + "€ à " + ui.values 1 ] + "€" );
            }
        });
        $( "#amount-euro" ).val( $( "#range-euro" ).slider( "values", 0 ) + "€ à " + $( "#range-euro" ).slider( "values", 1 ) + "€" );
    });
</script>

Pour le HTML: 

<form action="#" method="POST">
                    <span>Marque:</span>  <input type="text" /><br />
                    <span>Modèle:</span>  <input type="text" /><br />
                    <div class="range">
                        <span>Kilométrage:</span> 
                        <input id="amount-km" style="border:0; color:#3d96c6; font-weight:bold; font-size: 14px; width: 155px;" readonly /><br />
                        <div id="range-km"></div><br />
                        <span>Budget:</span>
                        <input id="amount-euro" style="border:0; color:#3d96c6; font-weight:bold; font-size: 14px;" readonly /><br />
                        <div id="range-euro"></div>
                    </div>
                    <div class="send"><input type="submit" class="submit" value="" /></div>
                    </form>

Merci de l'aide qui pourra m'être apporté.

3 réponses

Apo, il y a 14 ans

Comme on dit, la nuit porte conseil... Je ne sais pas pourquoi l'idée des input="hidden" ne mettait pas venue à l'esprit.. M'enfin.
Je mets le code pour celui qui aurait besoin de ça, bien que la solution va de soit pour beaucoup.

Coté JS:

$(function() {
            $( "#range-km" ).slider({
                range: true,
                min: 0,
                max: 200000,
                values: 20000, 180000 ],
                slide: function( event, ui ) {
                    var minVal=format(ui.values 0 ]);
                    var maxVal=format(ui.values 1 ]);
                    $( "#amount-km" ).val( minVal + " à " + maxVal + " km" );
                    $('#minPrice').val( ui.values 0 ] );
                    $('#maxPrice').val( ui.values 1 ] );
                }
            });
            $( "#amount-km" ).val( $( "#range-km" ).slider( "values", 0 ) + " à " + $( "#range-km" ).slider( "values", 1 ) + " km" );
        });
                // Separateur de millier
                function format(nbre)
        {
            var str_nbre = "";

            // Découpage de le fin vers le début, par longueur de 3
            for (cpt = nbre.toString().length - 3; cpt >= 0; cpt = cpt - 3 )
            {
                 str_nbre = nbre.toString().substr(cpt, 3) + " " + str_nbre;
            }
            // S'il y a un reste on traite
            if ( (nbre.toString().length % 3) != 0 )
                str_nbre = nbre.toString().substr(0, nbre.toString().length % 3) + " " + str_nbre;

            // Suppression du dernier .
            str_nbre = str_nbre.substr(0, str_nbre.length - 1);

            // Retour du résultat
            return (str_nbre);
        }

Coté HTML: 

<form action="test.php" method="POST">
                    <span>Marque:</span>  <input type="text" /><br />
                    <span>Modèle:</span>  <input type="text" /><br />
                    <div style="width: 400px">
                        <span>Kilométrage:</span> 
                        <input id="amount-km" style="border:0; color:#3d96c6; font-weight:bold; font-size: 14px; width: 155px;" readonly /><br />
                        <div id="range-km"></div><br />
                </div>
                    <input type="hidden" id="minPrice" name="minPrice" value="20000" />
                    <input type="hidden" id="maxPrice" name="maxPrice" value="180000" />
                    <input type="submit" class="submit" value="envoyer" />
      </form>
zvetlania, il y a 14 ans

merci beaucoup tu m'as fais gagner une bonne heure de recherche :p

Apo, il y a 14 ans

y'a pas de quoi, c'est fait pour :)