in this page : https://www.psd2html.com/order-now.html you can choose the items you want and the price will change with your selection. how can it be built ?
+1
A:
It is just a normal radiobutton list and when the radio is clicked the value is changed in the total cost label. You can use the onclick function of the radiobutton to do that. I would recommend using jquery by the way. Jquery is a great framework built off of javascript. I will never go back to using plain old javascript again.
Make sure you are referenceing jquery in the <head> of your file like this:
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery
Here try this:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
Your payment amount is : <span id="spn_Price"></span>
</div>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"/>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"/>
<script type="text/javascript">
function DisplayPrice(price)
{
$('[id$=spn_Price]').html(price);
}
</script>
</form>
</body>
</html>
jmein
2009-08-24 14:52:34
I just copy paste this code, but nothing happens !!
Datis
2009-08-24 16:24:22
there you go try it now I had made a small mistake in the jquery
jmein
2009-08-24 19:38:47
Thanks its working now :)
Datis
2009-08-24 20:09:43
Can you check this : http://stackoverflow.com/questions/1324703/calculation-radio-buttons-values-in-jquery
Datis
2009-08-24 20:54:51
+3
A:
They use Mootools, an object oriented JavaScript framework to achieve that effect, but it could be done in vanilla JavaScript too (although I'd recommend a framework to handle cross-browser issues, etc. The current favourite seems to be jQuery).
Essentially, based on the selected radio button in each layout option, a reference to the element that corresponds to the total price is made (<em id="amount">$[price]</em>) and the html set according to the selected radio.
Russ Cam
2009-08-24 14:54:02
+1
A:
something that can help you..
using jquery:
<p>
you amount is : <span id="displayPrice"></span>
</p>
<input type="radio" value="159" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>
<input type="radio" value="259" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>
and so on..
Gabriel Sosa
2009-08-24 14:58:05
try adding javascript in the onclick statement, like my edit. what error do you get. I'm 100% this is the way to it... I want the points so let me help you :P
Gabriel Sosa
2009-08-24 15:42:50
Are you referencing jquery in the file as I did in my post? I recommend downloading it and have a local reference personally but this is a good for trying something new.
jmein
2009-08-24 16:00:05
yes i have it in header, i have tested it with another function and it worked but this one .. nothing happens no error, nothing !
Datis
2009-08-24 16:06:56
A:
If you have "jQuery in Action" then you'll find there the exact example.
In a nutshell: prices were stored as additional attributes of spans, like this:
<span price="100">100$</span>
Then using jQuery you can create necessary listeners and get price using selector "span[price]" (then multiply it on number and get total price)
Roman
2009-08-24 15:01:43
A:
I would recommend JQuery because it is fairly easier to grasp than most other JavaScript libraries I have tried in the past. I happened to have been somewhat JavaScript Challenged until I took up JQuery and effects like the one you want there are easy to implement now.
Kobojunkie
2009-08-24 15:28:51
A:
The beauty of the web is that (almost) all presentational and logical code in the UI is viewable! You won't be able to see PHP or Rails code no, but by following links in the header of the page you can see css files, externally linked JS, and generally how the whole document is put together.
There's no better way to learn, in my opinion, than to use a DOM-sniffer (coined right now, by me, I beleive).
- XRay has a bookmarklet that lets you check out a page and its CSS properties.
- Web Developer Toolbar is the most comprehensive tool for inspecting anything that I know of.
- Additionally, a lot of people really like FireBug. The last two are for Firefox only, but really, have a look at them and learn to poke and prod on your own.
You'll never get the server side stuff (for good reason), but the client side stuff like the JS you're interested in is readily examinable.
Alex Mcp
2009-08-24 15:54:14