Updating the value of a math equation with YUI slider and simple radio buttons.
- by dj lewis
I have a form that is used to show a price for a product. I have a YUI slider setup that changes the price, and it works perfectly. Now I'm trying to add in radio buttons that also should update that same price value. The price displayed should take into account all 3 fields, and update dynamically as any are updated. This is the code I have, but I don't have any radio buttons for cpanelPrice yet as I'm still just trying to get the IPs to work.
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb", orderlink="order-link", monthlyprice="monthly-price", dram="ram", stor="storage",dcpu="cpu",bandw="bandwidth",slid="sliderbg"
// The slider can move 0 pixels up
var topConstraint = 0;
// The slider can move 200 pixels down
var bottomConstraint = 585;
// Custom scale factor for converting the pixel offset into a real value
var scaleFactor = 1;
// The amount the slider moves when the value is changed with the arrow
// keys
var keyIncrement = 65;
var tickSize = 65;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getHorizSlider(bg, thumb, topConstraint, bottomConstraint, tickSize);
slider.setValue(1, true);
slider.animate = true;
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var ordnode = Dom.get(orderlink);
var prinode = Dom.get(monthlyprice);
var ramnode = Dom.get(dram);
var stornode = Dom.get(stor);
var cpunode = Dom.get(dcpu);
var bwnode = Dom.get(bandw);
var slidnode = Dom.get(slid);
var actualValue = slider.getRealValue();
if (actualValue < 0) {
var actualValue = 0;
}
if (actualValue > -1 && actualValue < 5) {
basePrice = 15;
var pid = "7";
var ram = "128 MB";
stornode.innerHTML = "5";
cpunode.innerHTML = ".5";
bwnode.innerHTML = "50";
slidnode.innerHTML = "<img src=\"/images/sliderbg1.png\" alt=\"\" />";
} else if (actualValue > 60 && actualValue < 70) {
basePrice = 25;
var pid = "8";
var ram = "256 MB";
stornode.innerHTML = "10";
cpunode.innerHTML = ".5";
bwnode.innerHTML = "100";
slidnode.innerHTML = "<img src=\"/images/sliderbg2.png\" alt=\"\" />";
} else if (actualValue > 125 && actualValue < 135) {
basePrice = 40;
var pid = "9";
var ram = "512 MB";
stornode.innerHTML = "20";
cpunode.innerHTML = "1";
bwnode.innerHTML = "200";
slidnode.innerHTML = "<img src=\"/images/sliderbg3.png\" alt=\"\" />";
} else if (actualValue > 190 && actualValue < 200) {
basePrice = 60;
var pid = "10";
var ram = "1 GB";
stornode.innerHTML = "40";
cpunode.innerHTML = "1";
bwnode.innerHTML = "400";
slidnode.innerHTML = "<img src=\"/images/sliderbg4.png\" alt=\"\" />";
} else if (actualValue> 255 && actualValue < 265) {
basePrice = 80;
var pid = "11";
var ram = "1.5 GB";
stornode.innerHTML = "60";
cpunode.innerHTML = "1";
bwnode.innerHTML = "600";
slidnode.innerHTML = "<img src=\"/images/sliderbg5.png\" alt=\"\" />";
} else if (actualValue > 320 && actualValue < 330) {
basePrice = 110;
var pid = "12";
var ram = "2 GB";
stornode.innerHTML = "80";
cpunode.innerHTML = "2";
bwnode.innerHTML = "800";
slidnode.innerHTML = "<img src=\"/images/sliderbg6.png\" alt=\"\" />";
} else if (actualValue > 385 && actualValue < 395) {
basePrice = 140;
var pid = "13";
var ram = "2.5 GB";
stornode.innerHTML = "100";
cpunode.innerHTML = "2";
bwnode.innerHTML = "1000";
slidnode.innerHTML = "<img src=\"/images/sliderbg7.png\" alt=\"\" />";
} else if (actualValue > 450 && actualValue < 460) {
basePrice = 170;
var pid = "14";
var ram = "3 GB";
stornode.innerHTML = "120";
cpunode.innerHTML = "3";
bwnode.innerHTML = "1200";
slidnode.innerHTML = "<img src=\"/images/sliderbg8.png\" alt=\"\" />";
} else if (actualValue > 515 && actualValue < 525) {
basePrice = 200;
var pid = "15";
var ram = "3.5 GB";
stornode.innerHTML = "140";
cpunode.innerHTML = "3";
bwnode.innerHTML = "1400";
slidnode.innerHTML = "<img src=\"/images/sliderbg9.png\" alt=\"\" />";
} else if (actualValue > 580 && actualValue < 590) {
basePrice = 240;
var pid = "16";
var ram = "4 GB";
stornode.innerHTML = "160";
cpunode.innerHTML = "4";
bwnode.innerHTML = "1600";
slidnode.innerHTML = "<img src=\"/images/sliderbg10.png\" alt=\"\" />";
}
// Setup the order link
ordnode.innerHTML = "<a href=\"https://account.hostingbeast.com/cart.php?a=add&pid=" + pid + "\"><img src=\"/images/blank.gif\" alt=\"Order VPS Hosting\" height=\"100\" width=\"100\" /></a>";
ramnode.innerHTML = ram;
ipPrice = 0;
function setIpPrice(ips) {
ipPrice = ips.value;
}
cpanelPrice = 0;
prinode.innerHTML = basePrice + ipPrice + cpanelPrice;
});
// Use setValue to reset the value to white:
Event.on("putval", "click", function(e) {
slider.setValue(100, false); //false here means to animate if possible
});
setTimeout(function () { slider.setValue(10); },0);
});
})();
</script>
<div style="width: 649px; margin:auto">
<span id="sliderbg"></span>
<div class="yui-skin-sam">
<div id="slider-bg" class="yui-h-slider" tabindex="-1">
<div id="slider-thumb" class="yui-slider-thumb"><img src="/images/thumb-bar.png"></div>
</div>
</div>
</div>
<div class="vpsdetails">
<div id="vpsprod"><span id="cpu"></span></div>
<div id="vpsram"><span id="ram"></span></div>
<div id="vpsstor"><span id="storage"></span> GB</div>
<div id="vpsbw"><span id="bandwidth"></span> GB</div>
<div id="slideprice">$ <span id="monthly-price"></span></div>
</div>
<input type="radio" name="ips" value="2" onclick="setIpPrice(this.value - 2 * 2);" checked="checked" /> 2
<input type="radio" name="ips" value="4" onclick="setIpPrice(this.value - 2 * 2);" /> 4
