DaniWeb Forum Index > Web Development > PHP

Passing javascript slider value to hidden input

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 1

Reputation: djthekid is an unknown quantity at this point

Solved Threads: 0

djthekid

Offline

Newbie Poster

Passing javascript slider value to hidden input

Dec 17th, 2008

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:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<!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>
<!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<b></b>:history.go(-1)" />
<input type="submit" class="btn green" value="Submit" />
</form>

<? echo $_POST['effectiveness'] ?>

<div id="debug"></div>
<? ?>
</body>
</html>