Prijs slider maken
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
$(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.
Toevoeging op 20/02/2014 17:34:45:
En als ik dit toevoegen bij de post
Code (php)
1
2
2
<input type="hidden" name="min" id="min" value="0" />
<input type="hidden" name="max" id="max" value="6000" />
<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?!
Gewijzigd op 20/02/2014 17:22:25 door Kees Mulder
Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];
?>
$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:
Code (php)
1
$( "#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.
Gewijzigd op 28/02/2014 08:09:03 door Peter K
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.
Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];
?>
$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];
?>
Dat kan een stuk korter.
Gewijzigd op 28/02/2014 08:17:34 door Michael -
Michael - op 28/02/2014 08:16:20:
Dat kan een stuk korter.
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.
Je kunt later tijdens het verwerken de data ophalen en deze splitsen op basis van het 'min' teken tussen de waarden.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];
?>
$post_waarde = $_POST['amount'];
$explode_post = explode("-", $post_waarde);
$min = $explode_post['0'];
$max = $explode_post['1'];
?>
Dat kan een stuk korter.
Uiteraard kan het korter, maar gezien er uitleg gevraagd wordt leek het me verstandig het duidelijk uit te werken :)