0

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
  • I updated my version of the page if you want to check it out now
    – Josh Mein
    Aug 24, 2009 at 19:39

6 Answers 6

3

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.

1
1

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>
2
1

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..

3
  • 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 Aug 24, 2009 at 15:42
  • 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.
    – Josh Mein
    Aug 24, 2009 at 16:00
  • yes i have it in header, i have tested it with another function and it worked but this one .. nothing happens no error, nothing ! Aug 24, 2009 at 16:06
0

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)

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.