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:
HTML 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" 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<b></b>:history.go(-1)" /> <input type="submit" class="btn green" value="Submit" /> </form> <? echo $_POST['effectiveness'] ?> <div id="debug"></div> <? ?> </body> </html>


Reply With Quote

Bookmarks