Search code examples
javascriptjquerytimepicker

How to get the above input value when changing another input

I have two inputs those are bootstrap time pickers from time and to time, when i change the end time i need to get the start time.

Here from time and to time will be there in one row for the first time and next onwards when click on add new destination those will be dynamically append to the first row

enter image description here

Here I have to get the From Time and To Time when i change the To Time

I have tried below 

$(document).on('change','.departure_time_picker',function(){

  var departure_time  = $(this).val();
  var arrival_time    = $(this).prev().find('input.arrival_time_picker');
  console.log(arrival_time);
});

My inputs are 

<div class="col-md-3" style="padding-left:5px;padding-right:5px;">
   <label>From Time</label>
   <div class="form-group">
      <div class="input-group bootstrap-timepicker timepicker arrival_time">
           <input name="wayPoints[0][arrival_time]" type="text" class="form-control input-small arrival_time_picker">
           <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
      </div>
   </div>
 </div>
 <div class="col-md-3" style="padding-left:5px;padding-right:5px;">
     <label>To Time</label>
     <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker departure_time">
             <input name="wayPoints[0][departure_time]" type="text" class="form-control input-small departure_time_picker">
             <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
     </div>
  </div>

When i'm trying to get the Start Time when changing the To Time im getting as 'undefined'. Please suggest me where i'm doing wrong.

Solution

  • With prev() you'll find the previous sibling (so, on the same level as that element). It won't search up the tree for parents. So you need to understand how jQuery works.

    Your DOM tree looks like this

    col-md-3
|
|---label
|---.form-group
|  |
|  |--.input-group
|    |
|    |---.arrival_time_picker
|
|
col-md-3
|
|---label
|---.form-group
   |
   |---.input-group
     |
     |---.departure_time_picker

    You can move up the tree, but you can't move up and then search inside a sibling, at least, not with just one function,

    So first, you need to get up in the tree, by using

    .closest('.col-md-3')

    This finds the parent element of .departure_time_picker.
    Then you can find the previous sibling (on the same level)

    .prev()  
/* or */
.prev('.col-md-3')

    And then you can look inside that element for the element you are looking for:

    .find('.arrival_time_picker')

    All together:

    $(document).on('change','.departure_time_picker',function(){

  var departure_time  = $(this).val();
  var arrival_time    = $(this).closest('.col-md-3').prev().find('.arrival_time_picker').val();
  console.log( arrival_time );

}); 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3" style="padding-left:5px;padding-right:5px;">
   <label>From Time</label>
   <div class="form-group">
      <div class="input-group bootstrap-timepicker timepicker arrival_time">
           <input name="wayPoints[0][arrival_time]" type="text" class="form-control input-small arrival_time_picker">
           <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
      </div>
   </div>
 </div>
 <div class="col-md-3" style="padding-left:5px;padding-right:5px;">
     <label>To Time</label>
     <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker departure_time">
             <input name="wayPoints[0][departure_time]" type="text" class="form-control input-small departure_time_picker">
             <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
     </div>
  </div>