Prijs slider maken

Door Kees Mulder op 20-02-2014 17:10 gewijzigd op 20-02-2014 17:22

1.462 views

Ik wil om artikelen te laten zien een prijs slider maken. Nu heb ik een script gevonden van jquery maar je dat mee kan doen. Alleen krijg ik het POSTEN niet voor elkaar.

Als ik intik: producten-overzicht.php?min=100&max=2000

Dan krijg ik een goed overzicht. Maar als ik dan via de slider 2000 - 4000 selecter en deze post dan krijg ik dat niet voor elkaar.

Ik krijg dan producten-overzicht.php?min=&max=

Onderstaande is de jquery script en daaronder de code.


<script type="text/javascript">
$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 10000,
      values: [ <?php echo $_GET['min']; ?>, <?php echo $_GET['max']; ?> ],
      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> 

<body>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>?page=1" method="GET" id="searchlist" name="filters">
<div style="margin-left:20px">
    <label for="amount">Price range:</label>
    <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>
    <br><br>
    <div id="slider-range" style="width:80%;"></div>
    <br><br>
    <input type="submit" value=" Show products " />
</form>

Het lijkt of de slider geen input doorgeeft van min en max. Zit bij andere te kijken en daar zie ik in de broncode <input type="hidden" name="min"> en ook voor max staan.

[size=xsmall]Toevoeging op 20/02/2014 17:34:45:[/size]

En als ik dit toevoegen bij de post


	<input type="hidden" name="min" id="min" value="0" />
	<input type="hidden" name="max" id="max" value="6000" />

En ik doe dan een post dan geeft hij het wel door. Maar hoe krijg ik dat nu voor elkaar dat de min en max hidden veld ook wijzigt met de scroller?!

P Peter K

28-02-2014 08:08 gewijzigd op 28-02-2014 08:09

Persoonlijk zou ik de data aan elkaar laten zitten.

Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.

<?php

$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];

?>

Als je het toch wilt splitsen
Op regel 9:


 $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

Hier wordt de waarde weggeschreven naar het veld #amount oftewel d einput die op regel 22 staat.
Je ziet dat hier ui.values [ 0 ] en ui.values [ 1 ] wordt weggeschreven.
Deze zou je kunnen splitsen en vervolgens naar elke een eigen input veld wegschrijven.

Begin wel eerst met een gewoon input veld in plaats van een hidden veld. Zodoende zie je gelijk al of je script zou kunnen werken of niet.

Michael -

28-02-2014 08:16 gewijzigd op 28-02-2014 08:17

P Kornelis op 28/02/2014 08:08:19

Persoonlijk zou ik de data aan elkaar laten zitten.

Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.

<?php

$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];

?>

Dat kan een stuk korter.
<?php
list($min,$max) = explode('-', $_POST['amount']);
?>

P Peter K

28-02-2014 09:00

Michael - op 28/02/2014 08:16:20

[quote="P Kornelis op 28/02/2014 08:08:19"]
Persoonlijk zou ik de data aan elkaar laten zitten.

Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.

<?php

$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];

?>

Dat kan een stuk korter.
<?php
list($min,$max) = explode('-', $_POST['amount']);
?>
[/quote]

Uiteraard kan het korter, maar gezien er uitleg gevraagd wordt leek het me verstandig het duidelijk uit te werken :)

Michael -

28-02-2014 09:19

Wat de functie list() doet is niet zo moeilijk en variabele kopiëren is al een rare eigenschap die veel mensen overnemen, laat dat dan niet als voorbeeld worden gebruikt, maar het niveau gewoon wat hoger houden. Just my opinion ;) En dan is het altijd nog $explode_post[0]; ipv $explode_post['0'];

Reageren

Inloggen om te reageren