How to make calculations from the inputs on change?

Question

<!-- This inputs values coming from the date pickers. -->
<input type="text" name="checkin" value="2019-09-11"/> 
<input type="text" name="checkout" value="2019-09-13"/>

<input type="text" name="nightprice"/> <!-- When an user write a price -->

<input type="text" name="totalprice"/> <!-- This will be calculated -->

Calculate will be like this ;

The days between checkin and checkout will be calculated and it will be multiplied by days and price.

For example 2019-09-11 between 2019-09-13 is 2 day and if user write 200 on nightprice it will calculate this like 2x200 = 400 and will be placed at totalprice input

my question is how can i do this with jquery without refresh page.

@RobinZigmond can you explain how to calculate date difference in js ? — , Sep 10 '19 at 23:10
I dont request a code writing service. I just requested a solution idea! I got an idea from the robin and now im trying to do that. If i cant do i'll share my code on my questin to get solution. — , Sep 10 '19 at 23:31

score 1 · Accepted Answer · answered Sep 10 '19 at 23:31

Here's a simple jQuery way to do it. The poor-mans approach would be to just listen to any input change event and re-rerun your calculation. However, if you've got more inputs on your page / form than mentioned in this question (which you likely do) then I would use more specific selectors than simple listening to all inputs. Maybe look into a class? A form onsubmit function? There's plenty of ways to handle that.

const calculatePrice = (checkin, checkout, pricePerNight) => {
  checkin = new Date(checkin);
  checkout = new Date(checkout);
  const dayDiff = Math.round( (checkout - checkin) / (1000 * 60 * 60 * 24 ) );
  return dayDiff * pricePerNight;
};

$(document).ready( e => {
  const nightPriceInput = $('input[name="nightprice"]');
  const checkinInput = $('input[name="checkin"]');
  const checkoutInput = $('input[name="checkout"]');
  const totalPrice = $('input[name="totalprice"]');
  $('input').on('change', () => {
    const price = calculatePrice(checkinInput.val(), checkoutInput.val(), nightPriceInput.val());
    totalPrice.val(price);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This inputs values coming from the date pickers. -->
<input type="text" name="checkin" value="2019-09-11"/> 
<input type="text" name="checkout" value="2019-09-13"/>

<input type="text" name="nightprice"/> <!-- When an user write a price -->

<input type="text" name="totalprice"/> <!-- This will be calculated -->

I didn't know this date subtraction method. new lesson learned. Thanks — Evik Ghazarian, Sep 10 '19 at 23:49

Evik Ghazarian · Answer 2 · 2019-09-10T23:45:52.803

var startArray = $("#start").val().split("-");
var finishArray = $("#finish").val().split("-");
var yearDiff = finishArray[0] - startArray[0];
var monthDiff = finishArray[1] - startArray[1];
var dayDiff = finishArray[2] - startArray[2];
$("#price").on('change', function(){
var price = $("#price").val();
var total = ((yearDiff*365) + (monthDiff*30) + (dayDiff)) * price;
$("#total").html("$" + total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="start" type="text" name="checkin" value="2019-09-11"/> 
<input id="finish" type="text" name="checkout" value="2019-09-13"/>
<input id="price" type="text" name="nightprice" value="300"/>
<div id="total">
</div>

score -1 · Answer 3 · answered Sep 10 '19 at 23:30

See

 <input type="text" name="checkin" value="2019-09-11" id="checkin" /> 
    <input type="text" name="checkout" value="2019-09-13" id="checkout" />

    <input type="text" name="nightprice" onkeyup="calculate(this)"/> <!-- When an user write a price -->

    <input type="text" name="totalprice" id="totalprice" />

    <script>
        var calculate = function(element) {
            // get value
            var price = element.value;

            var checkin = document.getElementById("checkin");
                checkin = checkin.getAttribute('value').replace(/[\-]+/g,'');

            var checkout = document.getElementById("checkout");
                checkout = checkout.getAttribute('value').replace(/[\-]+/g,'');

            var totalprice = document.getElementById('totalprice');

            // difference
            var difference = checkout - checkin;

            // calcule final price
            var finalprice = price * difference;

            // set final price
            totalprice.setAttribute('value', finalprice);
        }
    </script>

How to make calculations from the inputs on change?

3 Answers3