11540 sujets

JavaScript, DOM et API Web HTML5

Transmission de données jquery - formulaire type range

Bonjour,

Je ne maitrise pas beaucoup jquery.

J'ai ce script qui me permet d'afficher une barre d'affinage des prix. Je voudrais savoir comment passer les valeurs choisies dans l'url de façon à avoir une url comme celle-ci : index.php?prix_min=20&prix_max=80

<script>
 
    $(function() {
 
    $( "#slider-range" ).slider({
 
    range: true,
 
    min: 0,
 
    max: 2000,
 
    values: [ 0, 1000 ],
 
    slide: function( event, ui ) {
 
    $( "#amount" ).val( ui.values[ 0 ] + " € - " + ui.values[ 1 ] + "€" );
 
    }
 
    });
 
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) + "€ - " + $( "#slider-range" ).slider( "values", 1 ) + " €");
 
    });
 
</script>


<div id="affinage_prix">
 
     <p class="titre_affinage"><img src="static/images/titre_affinage_prix.png" alt="GROUP TELECOM" title="GROUP TELECOM" /></p>
 
<form class="form_range" method="get" action="index.php">
 
    <div id="slider-range"></div>
    <p><input type="text" id="amount" style="border: 0; color: black; font-weight: bold; background-color: #f2f2f2; width: 200px;" name="amout"/></p>
 
</form>
 
</div>


Merci de votre coup de main.
Bonsoir,
Le mieux c'est de gérer cela via php comme ceci :
values: [ <?php echo htmlspecialchars($_GET['prix_min'] . ', ' . $_GET['prix_max'])],

Attention il faut que php soit installé sur votre serveur pour que cela fonctionne.
Merci pour votre aide mais je crois que vous avez mal compris mon problème. Je souhaiterai savoir comment récupérer les données choisies via ce formulaire et non afficher dans le formulaire des données déjà connues.
Modifié par chpe1 (02 Oct 2013 - 01:29)
Désolé mais je peine à comprendre.

ok pour les input hidden mais quelle valeur je leur attribue ?

<input type="hidden" name="prix_min" value=" ????" />
<input type="hidden" name="prix_max" value=" ????" />

Et comment faire justement sans le bouton submit ?
chpe1 a écrit :
ok pour les input hidden mais quelle valeur je leur attribue ?

Dans le code html il faut laisser vide value. C'est le code ci-dessous qui va modifier la valeur (non testé)

slide: function( event, ui ) {
    $( "#prix_min" ).val(  ui.values[0] );
    $( "#prix_max" ).val(  ui.values[1] );
}


chpe1 a écrit :
Et comment faire justement sans le bouton submit ?

Je ne vois pas de solution. Si tu avais eu une seul valeur dans ton slide, cela n'aurait pas posé de problème, mais là avec 2 je ne vois pas.
Merci.

Pour la transmission des deux valeurs, jette un oeil sur ce lien :

http://www.darty.com/nav/achat/informatique/tablette_tactile/index.html

Dans la colonne de gauche il y a aussi une barre d'affinage des prix. Si tu bouges un seul curseur, la page se rafraichit et affine les résultats. Je suppose que dans ce cas, il n'y a qu'une variable qui est transmise, l'autre reste fixe.

Ne pourrait-on pas faire un truc du même genre ?
Modifié par chpe1 (05 Oct 2013 - 03:42)
Sujet clos
Aller à