SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-value product calculator form

    My question is as follows:

    I want to create a complex order form that has 10-15 products. Each product has the option to choose the size (A) and quantity(B). Depending on the person's choice a value is calculated presented (C). I then need all the products final values (C) to add up and display in box at the bottom of the page (D)

    I've managed to find great solutions for the A+B=C, but I just can get one that then adds up all the C values.

    Is there a simple Javascript solution for this problem?

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a simple Javascript solution for this problem?
    That's all pretty straight forward - post the code you have so far.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ginmau View Post
    Is there a simple Javascript solution for this problem?
    The standard technique is for each change of A or B to trigger a calculation method. That calculation method works out C, and then triggers a method to total up the values.

    How that's done depends on how the page is structured, and on the code that you currently have.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for the reply.

    That is along the lines of what I was thinking. The reason I didn't post my code is because I couldn't find any solutions that seemed straightforward so I wanted to find a viable solution before even putting together the page, especially since I'm not that well versed in Javascript and was scared to build on badly written code.

    Any suggestion on the best way to approach this problem from the beginning?

  5. #5
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's my code so far, as you can see I still haven't approached the Javascript and I'm honestly not sure where to start:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link href="/css/960_24_col.css" rel="stylesheet" media="all">
    <style type="text/css">
    	#wrapper {overflow:hidden;}
    	#total_order {background-color:#999; text-align:right; padding: 20px 0px; color:#FFF; font-weight:bold; clear:both;}
    </style>
    
    </head>
    
    <body>
    
    <div id="wrapper" class="container_24">
    
        <header>
            <img name="Logo" src="" width="150" height="150" alt="">
            <h2>Nome da Escola</h2>
        </header>
    
        <section>
            <form action="form_process.asp" method="post" name="reserva_uniformes">
                
                <ul>
                    <li class="grid_6">
                        <img src="images/maquete1.jpg" width="230" height="300">
                        <h3>Camisa xpto</h3>
                        <label>Tamanho
                        	<select name="tamanho" id="tamanho">
                            	<option value="1,50">2</option>
                                <option value="2,50">4</option>
                                <option value="3,50">6</option>
                                <option value="4,50">8</option>
                        	</select>
                        </label>
                        <label>Quantidade
                        	<input name="quantidade" type="text" value="quantidade" id="quantidade" size="2">
                        </label>
                        <p>Total:<div id="prod_total">0,00</div>
                    </li>
                    <li class="grid_6">
                        <img src="images/maquete1.jpg" width="230" height="300">
                        <h3>Camisa xpto</h3>
                        <label>Tamanho
                        	<select name="tamanho" id="tamanho">
                            	<option value="1,50">2</option>
                                <option value="2,50">4</option>
                                <option value="3,50">6</option>
                                <option value="4,50">8</option>
                        	</select>
                        </label>
                        <label>Quantidade
                        	<input name="quantidade" type="text" value="quantidade" id="quantidade" size="2">
                        </label>
                        <p>Total:<div id="prod_total">0,00</div>
                    </li><li class="grid_6">
                        <img src="images/maquete1.jpg" width="230" height="300">
                        <h3>Camisa xpto</h3>
                        <label>Tamanho
                        	<select name="tamanho" id="tamanho">
                            	<option value="1,50">2</option>
                                <option value="2,50">4</option>
                                <option value="3,50">6</option>
                                <option value="4,50">8</option>
                        	</select>
                        </label>
                        <label>Quantidade
                        	<input name="quantidade" type="text" value="quantidade" id="quantidade" size="2">
                        </label>
                        <p>Total:<div id="prod_total">0,00</div>
                    </li><li class="grid_6">
                        <img src="images/maquete1.jpg" width="230" height="300">
                        <h3>Camisa xpto</h3>
                        <label>Tamanho
                        	<select name="tamanho" id="tamanho">
                            	<option value="1,50">2</option>
                                <option value="2,50">4</option>
                                <option value="3,50">6</option>
                                <option value="4,50">8</option>
                        	</select>
                        </label>
                        <label>Quantidade
                        	<input name="quantidade" type="text" value="quantidade" id="quantidade" size="2">
                        </label>
                        <p>Total:<div id="prod_total">0,00</div>
                    </li>
                </ul>
            	<div id="total_order" class="container_24">
                	TOTAL ORDER: 0,00
                </div>
            </form>
        </section>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright guys, I managed to get my questions answered, you can find the answer here for anyone interested:
    http://forum.jquery.com/topic/multi-...uct-calculator


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •