SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Get price and add

    Anyone know of a javascript that can get the values of the id's from the selected options and add them to the inputbox?

    For instance, if you select "Product 3" and "Service 2", the inputbox will display $1699.99


    HTML Code:
    <form action="">
    
      <fieldset>
      
        <ul style="list-style:none;padding-left:0;">
          <li>Product:
            <select class="products1" name="Products">
              <option id="$100.00" value="Product 1">Product 1</option>
              <option id="$150.00" value="Product 2">Product 2</option>
              <option id="$199.99" value="Product 3">Product 3</option>
            </select>
          </li>
              
          <li>Service:
            <select class="services1" name="Services">
              <option id="$500.00" value="Service 1">Service 1</option>
              <option id="$1500.00" value="Service 2">Service 2</option>
              <option id="$2000.00" value="Service 3">Service 3</option>
            </select>
          </li>
              
        </ul>
            
        Total: <input class="totalPrice" type="text" disabled="disabled" value="0.00" />
      
      </fieldset>
    
    </form>
    "Take a seat and have a coffee." -- Macchiato

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Your code is invalid - ids are not allowed to start with a $ character - they can only start with a letter

    Instead of

    <option id="$500.00" value="Service 1">Service 1</option>

    you should enter the options as

    <option value="500.00,Service 1">Service 1</option>

    You can then retrieve the selected values and split them on the comma in order to get the amounts and descriptions separately.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi felgall, thank you for your reply.

    I cannot change the value attribute, it's fixed. And the price gets pulled from a database and has a $ sign in it. I can however change the "id" attribute to "title".


    HTML Code:
    <form action="">
    
      <fieldset>
      
        <ul style="list-style:none;padding-left:0;">
          <li>Product:
            <select class="products1" name="Products">
              <option title="Product 1,$100.00" value="Product 1">Product 1</option>
              <option title="Product 2,$150.00" value="Product 2">Product 2</option>
              <option title="Product 3,$199.99" value="Product 3">Product 3</option>
            </select>
          </li>
              
          <li>Service:
            <select class="services1" name="Services">
              <option title="Service 1,$500.00" value="Service 1">Service 1</option>
              <option title="Service 2,$1500.00" value="Service 2">Service 2</option>
              <option title="Service 3,$2000.00" value="Service 3">Service 3</option>
            </select>
          </li>
              
        </ul>
            
        Total: <input class="totalPrice" type="text" disabled="disabled" value="0.00" />
      
      </fieldset>
    
    </form>

    Do you know a javascript for this?
    "Take a seat and have a coffee." -- Macchiato

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the code that creates those <select>'s.

    It shouldn't be difficult to modify it to add the price (without a dollar sign) to the value attribute separated by a comma or whatever character you like.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok! I can do it

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use:
    getElementById();
    getAttribute();
    Substring();
    parseInt();

  7. #7
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is a very quick (and un-optimised) implementation, but should give you a start:

    Code HTML4Strict:
    <form action="">
    	<fieldset>
    		<ul style="list-style:none;padding-left:0;">
    			<li>Product:
    			<select class="products1" name="Products">
    				<option title="$100.00" value="Product 1">Product 1</option>
    				<option title="$150.00" value="Product 2">Product 2</option>
    				<option title="$199.99" value="Product 3">Product 3</option>
    			</select>
    			</li>
     
    			<li>Service:
    			<select class="services1" name="Services">
    				<option title="$500.00" value="Service 1">Service 1</option>
    				<option title="$1500.00" value="Service 2">Service 2</option>
    				<option title="$2000.00" value="Service 3">Service 3</option>
    			</select>
    			</li>
     
    		</ul>
    		Total: <input id="totalPrice" type="text" disabled="disabled" value="0.00" />
    	</fieldset>
    </form>	
    <script>
    	// From [url]http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/5342097#5342097[/url]
    	function formatDollar(num) {
    		var p = num.toFixed(2).split(".");
    		return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
    			return  num + (i && !(i % 3) ? "," : "") + acc;
    		}, "") + "." + p[1];
    	}
     
    	window.onload = function() {
     
    		var totalPriceElm = document.getElementById('totalPrice'),
    			products = document.forms[0].Products,
    			services = document.forms[0].Services
    			pCost = parseFloat(products.options[products.selectedIndex].title.split('$')[1]), 
    			sCost = parseFloat(services.options[services.selectedIndex].title.split('$')[1]);
     
    			totalPriceElm.value = formatDollar(pCost + sCost);
     
    		products.onchange = function() {
    			pCost = parseFloat(products.options[products.selectedIndex].title.split('$')[1]);
    			totalPriceElm.value = formatDollar(pCost + sCost);
    		}
    		services.onchange = function() {
    			sCost = parseFloat(services.options[services.selectedIndex].title.split('$')[1]);
    			totalPriceElm.value = formatDollar(pCost + sCost);
    		}	
    	};	
    </script>

  8. #8
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply centered effect. This is a very good solution.
    I was wondering, what if you had no price for the first option in the list, what do you have to change to the code?

    Code HTML4Strict:
    <li>Product:
     <select class="products1" name="Products">
      <option value="Product 1">Choose product</option>
      <option title="$100.00" value="Product 2">Product 2 (+$100.00)</option>
      <option title="$150.00" value="Product 3">Product 3 (+$150.00)</option>
      <option title="$199.99" value="Product 4">Product 4 (+$199.99)</option>
     </select>
    </li>
     
    <li>Service:
     <select class="services1" name="Services">
      <option value="Service 1">Choose service</option>
      <option title="$500.00" value="Service 2">Service 2 (+$500.00)</option>
      <option title="$1500.00" value="Service 3">Service 3 (+$1500.00)</option>
      <option title="$2000.00" value="Service 4">Service 4 (+$2000.00)</option>
     </select>
    </li>
    "Take a seat and have a coffee." -- Macchiato

  9. #9
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What have you tried based on the code given? I can give you a hint, the easiest solution doesn't involve a change to the Javascript.

  10. #10
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I know one way to do it:

    Code HTML4Strict:
    <li>Product:
      <select class="products1" name="Products">
        <option title="Product 1 (+$0.00)" value="Product 1">Choose product</option>
        <option title="Product 2 (+$100.00)" value="Product 2">Product 2 (+$100.00)</option>
        <option title="Product 3 (+$150.00)" value="Product 3">Product 3 (+$150.00)</option>
        <option title="Product 4 (+$199.99)" value="Product 4">Product 4 (+$199.99)</option>
      </select>
    </li>
     
    <li>Service:
      <select class="services1" name="Services">
        <option title="Service 1 (+$0.00)" value="Service 1">Choose service</option>
        <option title="Service 2 (+$500.00)" value="Service 2">Service 2 (+$500.00)</option>
        <option title="Service 3 (+$1500.00)" value="Service 3">Service 3 (+$1500.00)</option>
        <option title="Service 4 (+$2000.00)" value="Service 4">Service 4 (+$2000.00)</option>
      </select>
    </li>

    But do you know how to do this with javascript if you remove the title attribute from the first option, like this?:

    Code HTML4Strict:
    <li>Product:
      <select class="products1" name="Products">
        <option value="Product 1">Choose product</option>
        <option title="Product 2 (+$100.00)" value="Product 2">Product 2 (+$100.00)</option>
        <option title="Product 3 (+$150.00)" value="Product 3">Product 3 (+$150.00)</option>
        <option title="Product 4 (+$199.99)" value="Product 4">Product 4 (+$199.99)</option>
      </select>
    </li>
     
    <li>Service:
      <select class="services1" name="Services">
        <option value="Service 1">Choose service</option>
        <option title="Service 2 (+$500.00)" value="Service 2">Service 2 (+$500.00)</option>
        <option title="Service 3 (+$1500.00)" value="Service 3">Service 3 (+$1500.00)</option>
        <option title="Service 4 (+$2000.00)" value="Service 4">Service 4 (+$2000.00)</option>
      </select>
    </li>
    "Take a seat and have a coffee." -- Macchiato

  11. #11
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Based on an earlier post in this thread - I thought you couldn't change the value? The value is the proper place to put the dollar amount, if any.

    Secondly, what is the Javascript code telling you? The initial var creation is where you would change the code.


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
  •