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
