How to calculate two input text values in jquery

Question

I want to calculate the total prices of products using the input text values.

The html code and javascript snippet are as follows:

$('input').keyup(function(){ // run anytime the value changes

var firstValue = parseFloat($('#value1').val()) || 0; // get value of field
var secondValue = parseFloat($('#value2').val()) || 0; // convert it to a float



var subtotal1 = firstValue * 10;
var subtotal2 = secondValue * 15;

    
$('#subtotal1').html(subtotal1); // output it
$('#subtotal2').html(subtotal2); // output it
$('#finaltotal').html(subtotal1 + subtotal2); // output it
});

<!-- Product 1 -->
		<div>						
			<label>Product 1</label>
			<div><input type="text" id="value1"><?php echo ' x 10USD = ';?><span id="subtotal1"></span>USD</div> 

<!-- Product 2 -->
		<div>						
			<label>Product 2</label>
			<div><input type="text" id="value2"><?php echo ' x 15USD = ';?><span id="subtotal2"></span>USD</div> 
	
	<!-- Total -->
		<div>						
			<label>Total:</label>
			<div><span id="#finaltotal"></span>USD</div>
	</div>

The final result should be something like the following: [1 ] x 10USD = 10USD [2 ] x 15USD = 30USD Total: 40USD

However, the above code does not work properly. Is there a good way to get it done?

Thanks for your help.

You have to elaborate on "does not work properly". Otherwise there is no way for us to know what is happening. — suvartheec
– suvartheec, Commented Jun 23, 2015 at 22:58

Daniel K. · Accepted Answer · 2015-06-23 23:01:53Z

1

Remove hash from id attribute, id="finaltotal"

<label>Total:</label>
<div><span id="#finaltotal"></span>USD</div>

               ^-----------remove-----------

It works!

http://jsfiddle.net/4edbv96r/

answered Jun 23, 2015 at 23:01

Daniel K.

815 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack Tanner · Accepted Answer · 2015-06-23 23:15:16Z

0

You had a typo. <span id="#finaltotal"></span> should be <span id="finaltotal"></span>

Updated snippet:

$('input').keyup(function() { // run anytime the value changes
  var firstValue = parseFloat($('#value1').val()) || 0; // get value of field
  var secondValue = parseFloat($('#value2').val()) || 0; // convert it to a float
  var subtotal1 = firstValue * 10;
  var subtotal2 = secondValue * 15;
  $('#subtotal1').html(subtotal1); // output it
  $('#subtotal2').html(subtotal2); // output it
  var finalAnswer = (subtotal1 + subtotal2).toString();
  $('#finaltotal').html(finalAnswer.replace(/\B(?=(\d{3})+\b)/g, ",")); // output it
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Product 1 -->
<div>
  <label>Product 1</label>
  <div>
    <input type="text" id="value1">
    <?php echo ' x 10USD = ';?><span id="subtotal1"></span>USD</div>

  <!-- Product 2 -->
  <div>
    <label>Product 2</label>
    <div>
      <input type="text" id="value2">
      <?php echo ' x 15USD = ';?><span id="subtotal2"></span>USD</div>

    <!-- Total -->
    <div>
      <label>Total:</label>
      <div><span id="finaltotal"></span>USD</div>
    </div>

edited Jun 23, 2015 at 23:15

answered Jun 23, 2015 at 23:00

Zack Tanner

2,5801 gold badge29 silver badges45 bronze badges

2 Comments

Peter Over a year ago

Thank you very much. I have another question: If the total value exceeds 1000 USD, can I insert a thousand separator (comma)?

Zack Tanner Over a year ago

You can do this using a regex. "10000000".replace(/\B(?=(\d{3})+\b)/g, ","). I've updated my snippet with an example.

Collectives™ on Stack Overflow

How to calculate two input text values in jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related