Get price and add

JavaScript
1

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


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

This is a very quick (and un-optimised) implementation, but should give you a start:


<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 http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/5342097#5342097
	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>
3

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.

4

you can use:
getElementById();
getAttribute();
Substring();
parseInt();

5

ok! I can do it

6

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.

7

Well, I know one way to do it:


<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?:


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

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.

9

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?


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

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.

11

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


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