De PHPhulp kroeg
Jquery slider koppelen aan php
heb volgend script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testje slider</title>
<style type="text/css">
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}
/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}
/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}
/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<div class="slider"></div>
<form action="./index.php" method="post">
<input type="hidden" id="hidden" value="" onchange="this.form.submit();"/>
</form>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 6,
min: 6,
max: 330,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui )
{
$( "#slider-result" ).html( ui.value );
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui)
{
$('#hidden').attr('value', ui.value);
}
});
</script>
</body>
</html>
Bij de gebruikte form zou de waarde van de slider moeten veranderen en doorgegeven worden aan een php script op dezelfde pagina! Iemand een idee wat ik verkeerd doe??
Groetjes,
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?
$aantal_kleuren = $_POST['val'];
$interval_kleuren = 330;
$gelijke_delen = $interval_kleuren/$aantal_kleuren;
?>
$aantal_kleuren = $_POST['val'];
$interval_kleuren = 330;
$gelijke_delen = $interval_kleuren/$aantal_kleuren;
?>
groetjes, toch al reeds bedankt.
Gewijzigd op 21/07/2012 16:36:17 door Jelle Vl
<body>
<div class="slider"></div>
<script>
$( ".slider" ).slider({
animate: true,
range: "min",
value: 6,
min: 6,
max: 330,
step: 1
});
$('div#slider').slider ({
slide: function (event, ui) {
$('#val').val (ui.value);
},
stop: function (event, ui) {
alert ('De input heeft nu waarde ' + $('#val').val ());
}
});
</script>
<form action="./index.php" method="post">
<input id="val" type="hidden" value="" onchange="this.form.submit();">
</form>
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?
$aantal_kleuren = $_POST['val'];
$interval_kleuren = 330;
$gelijke_delen = $interval_kleuren/$aantal_kleuren;
echo $gelijke_delen;
?>
$aantal_kleuren = $_POST['val'];
$interval_kleuren = 330;
$gelijke_delen = $interval_kleuren/$aantal_kleuren;
echo $gelijke_delen;
?>
</body>
nu krijg ik echter nog geen waarden voor $aantal_kleuren? iemand een idee waar de fout kan zitten??
groetjes