Marcel Czuryszkiewcz
Marcel Czuryszkiewcz

Reputation: 43

Get multiple values from inputs in a live way JQuery

i have two inputs which are datepickers thanks to this

<div class="col-6">
  <input type="text" class="dateselect startDateJq "   required="required"/>
</div>
<div class="col-6">
 <input type="text" class="dateselect  endDateJq"  required="required"/>
</div>

and now im trying to get the dates in string format in a live way (not onload or keyup, when user picked or changed his date the variable changes) with JQ to calculate the price for the customer based on the difference between two dates like this.

 $('.startDateJq, .endDateJq').on("input", function(){
      var a = ($(".startDateJq").val());
      var b = ($(".endDateJq").val());
 });

but as you can guess it's not working at all. I will calculate the difference thanks to moment js but firstly i need this to work

Upvotes: 0

Views: 184

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

If I understand your questions correctly, I would advise you to listen to change in value. See the example below.

$(function() {
  $('#startDateJq, #endDateJq').on("change", function() {
    setTimeout(function() {
      var a = new Date($(".dateselect").val());
      var b = new Date($(".dateselect1").val());
      var diff = (b - a);
      alert(diff / 1000 / 60 / 60 / 24 + " Day(s)");
    }, 1000); // A litle delay to wait for both values
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <input type="date" class="dateselect" id='startDateJq ' required="required" />
</div>
<div class="col-6">
  <input type="date" class="dateselect1" id='endDateJq' required="required" />
</div>

Upvotes: 1

Marcel Czuryszkiewcz
Marcel Czuryszkiewcz

Reputation: 43

Zhonk was right the input wasn't triggered at all this will work


  $('.dateselect').datepicker()
    .on('changeDate', function() {
        var a = ($(".startDateJq").val());
        console.log(a)
    });

Upvotes: 0

Related Questions