jQuery calculate total amount base on input number

Question

I'm making a form that user can pick a number of tickets with <input type="number"> field, the price is fixed $5/ticket. I want to display the total price dynamically in the readonly field follows.

Questions:

• How to display $5 in the total amount by default?

• If you input 2 tickets it should say $10, and 3 tickets $15, and so on.

 jQuery(function($) { var $amount_fields = $('#number-tickets'), $total_amount = $('#total-amount'); $amount_fields.on('input', function(e) { var final_value = 0; $amount_fields.each(function() { var value = $(this).val(); if (!isNaN(value) && value > 0) final_value += parseInt(value); }); $total_amount.val(final_value); }); }); 

 label, span { display: block; margin: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <span>Number of tickets @ $5/ticket:</span> <input type="number" name="number-of-tickets" value="1" min="1" id="number-tickets" /> </label> <label> <span>Total amount:</span> $ <input type="text" name="total-amount" value="" id="total-amount" readonly /> </label> 

Answer 1

You just need to multiply the amount by 5 to show the proper total. Note that parseInt should be passed a radix .

Then to have it display properly upon the page loading use .trigger('input')

 jQuery(function($) { var $amount_fields = $('#number-tickets'), $total_amount = $('#total-amount'); $amount_fields.on('input', function(e) { var final_value = 0; $amount_fields.each(function() { var value = $(this).val(); if (!isNaN(value) && value > 0) final_value += parseInt(value,10) * 5; }); $total_amount.val(final_value); }).trigger('input'); }); 

 label, span { display: block; margin: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <span>Number of tickets @ $5/ticket:</span> <input type="number" name="number-of-tickets" value="1" min="1" id="number-tickets" /> </label> <label> <span>Total amount:</span> $ <input type="text" name="total-amount" value="" id="total-amount" readonly /> </label> 

Answer 2

You're missing the part where you multiply by your ticket price. I placed a comment in the section where this should be taken care of.

 jQuery(function($) { var $amount_fields = $('#number-tickets'), $total_amount = $('#total-amount'); $amount_fields.on('input', function(e) { var final_value = 0; $amount_fields.each(function() { var value = $(this).val(); if (!isNaN(value) && value > 0) final_value += parseInt(value); }); $total_amount.val(final_value * 5); // You need to multiply by the ticket price ($5) before setting the field's value. }); }); 

 label, span { display: block; margin: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <span>Number of tickets @ $5/ticket:</span> <input type="number" name="number-of-tickets" value="1" min="1" id="number-tickets" /> </label> <label> <span>Total amount:</span> $ <input type="text" name="total-amount" value="" id="total-amount" readonly /> </label>