I need some help here please.
I have a form that has a javascript slider bar to give one field's percentage.
Unfortunately I can't get the value to pass to the hidden input.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Slider test</title>
<script type="text/javascript" src="configs/prototype.js"></script>
<script type="text/javascript" src="configs/scriptaculous.js"></script>
</head>
<body>
<p>Slider works with a click on the track, pulling the handle, or the mouse wheel.</p>
<form action="<? $SERVER['PHP_SELF'] ?>" method="post">
<div id="slider">
<div id="slider-bar">
<div id="slider-handle"><p id="percent">//The percentage shows here!!../</p></div>
</div>
</div>
<br />
<br />
<input type="hidden" id="percent" onkeyup="setSlideOutput(slide, this.value);" name="effectiveness" onchange="setSlideOutput(slide, this.value);" value="" />
<script type="text/javascript">
// <![CDATA[
var hWidth, bWidth, slide;
function setBgPos(v) {
var off = v * hWidth;
var pos = -bWidth + (v * bWidth);
$('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
}
function setSlideOutput(v) {
$('percent').update(Math.round(v * 100) + '%');
}
Event.observe(window, 'load', function() {
hWidth = $('slider-handle').getWidth();
bWidth = $('slider-bar').getWidth();
slide = new Control.Slider('slider-handle', 'slider-bar', {
sliderValue: 0.10,
onSlide:
function(v) {
setBgPos(v);
setSlideOutput(v);
},
onChange:
function(v) {
setBgPos(v);
setSlideOutput(v);
}
});
setBgPos(slide.value);
setSlideOutput(slide.value);
Event.observe('slider', 'mousewheel', function(e) {
slide.setValueBy((Event.wheel(e)/20));
});
});
// ]]>
</script>
<style type="text/css">
@import url(configs/slider.css);
body {
font-family: arial, verdana, sans-serif;
}
</style>
<input name="status" type="hidden" value="1" />
<input type="button" value="Change Info" onclick="javascript:history.go(-1)" />
<input type="submit" class="btn green" value="Submit" />
</form>
<? echo $_POST['effectiveness'] ?>
<div id="debug"></div>
<? ?>
</body>
</html>