append last text-box value to next text-box using JavaScript

Question

Get last textbox value added dynamically and append that textbox value to next textbox:

$('#myTable').on('click', 'input[type="button"]', function() {
  $(this).closest('tr').remove();
})
$('#add-more').click(function() {
  var vTime = document.querySelector(".vTime").value;
  var vDuration = document.querySelector(".vDuration").value;
  $('#myTable').append('<tr><td><input type="text" id="vTime" placeholder="Enter Time" class="vTime" /></td><td><input type="text" id="vDuration" placeholder="Enter Duration" class="vDuration" /></td><td><input type="button" value="Delete" /></td></tr>')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>
      <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" />
    </td>
    <td>
      <input type="button" value="Delete" />
    </td>
  </tr>
</table>
<input id="add-more" type="button" value="Add more">

Here, I am adding next row on click of "Add more" button. So let say time text box value is 9:30 and minutes textbox value is 30 then next added textbox value will be 10:00 and 30 in minutes textbox (this can be changed).

How can I get last textbox value and add some amount of minutes in it?

I understand why the "*next...value will be `10:00`* - (the start-time plus the duration), but what do you mean by "*and 30 in minutes textbox*"? Also, "*(this can be changed)*" - so, if the duration is changed the textbox with the `10:00` should also be updated automatically? — David Thomas, Aug 06 '19 at 09:54

Neel Bhanushali · Answer 1 · 2019-08-06T10:27:33.440

I've used momentjs to process time.

$('#myTable').on('click', 'input[type="button"]', function() {
  $(this).closest('tr').remove();
})
$('#add-more').click(function() {
  // getting all time inputs
  var vTimes = document.querySelectorAll(".vTime");
  // getting last time input
  var vTime = vTimes[vTimes.length - 1].value;

  // getting all duration inputs
  var vDurations = document.querySelectorAll(".vDuration")
  // getting last duration input
  var vDuration = vDurations[vDurations.length - 1].value;

  // calculating updated time
  var updatedTime = moment(vTime, 'HH:mm').add(vDuration, 'm').format('HH:mm');


  $('#myTable').append('<tr><td><input type="text" id="vTime" placeholder="Enter Time" class="vTime" value="' + updatedTime + '"/></td><td><input type="text" id="vDuration" placeholder="Enter Duration" class="vDuration" value="' + vDuration + '" /></td><td><input type="button" value="Delete" /></td></tr>')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>
      <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" />
    </td>
    <td>
      <input type="button" value="Delete" />
    </td>
  </tr>
</table>
<input id="add-more" type="button" value="Add more">

I could be wrong but I think the OP means that you also have to take the time of the last added input and add 30 to it as stated in his first line "Get last textbox value added dynamically and append that textbox value to next textbox". yours seems to add 30 to the first one and always generates 10:00 in the next inputs. — mrdeadsven, Aug 06 '19 at 10:01
this is also good solution but I don't want to use `moment.js` — Pathik Vejani, Aug 06 '19 at 10:31

Mamun · Accepted Answer · 2019-08-07T04:06:20.627

You can make use of a function to add minutes to string time from Add 15 minutes to string in javascript.

Please Note: The attribute id must be unique in a document.

$('#myTable').on('click', 'input[type="button"]', function () {
  $(this).closest('tr').remove();
});

$('#add-more').click(function () {
  var vTime = $(".vTime:last-child").last().val();
  var vDuration = $(".vDuration").last().val();
  var nTime = addMinutes(vTime, vDuration);
  $('#myTable').append('<tr><td><input type="text" placeholder="Enter Time" class="vTime" /></td><td><input type="text" placeholder="Enter Duration" class="vDuration" /></td><td><input type="button" value="Delete" /></td></tr>');
  
  $('.vTime').trigger('input');
});

$('body').on('input', calculateTime);

function calculateTime(){
  $('tr .vTime').not(':first').each(function(i, el){
    var vTime = $(this).closest('tr').prev().find('.vTime').val();
    var vDuration = $(this).closest('tr').prev().find('.vDuration').val();
    var nTime = addMinutes(vTime, vDuration);
    $(el).val(nTime);
  });
}

function addMinutes(time, minsToAdd) {
  function D(J){ return (J<10? '0':'') + J;};
  var piece = time.split(':');
  var mins = piece[0]*60 + +piece[1] + +minsToAdd;
  return D(mins%(24*60)/60 | 0) + ':' + D(mins%60);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>
      <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" />
    </td>
    <td>
      <input type="button" value="Delete" />
    </td>
  </tr>
</table>
<input id="add-more" type="button" value="Add more">

While I appreciate that you posted this answer, as I write, less than a minute ago; I would recommend taking the time to edit a lot of explanation into your answer, otherwise the OP - and future visitors for whom we're writing these answers - are probably not going to understand what's going on, or how to apply your solution to their problems. — David Thomas, Aug 06 '19 at 09:55
You also should not use the same id for different elements. In line 9, remove the ID (` id="vTime"`) or dynamically generate a new one. — saulotoledo, Aug 06 '19 at 09:57
@Mamun also, If i change duration in between then it should reflect for other times. Let say I have made entries up to 12:30 with 30 minutes duration and now I want to make 10:00 duration to 45 minutes so all the times after 10:00, it should be 10:45, 11:30, 12.15..... — Pathik Vejani, Aug 06 '19 at 11:32
@Mamun yes, that is correct but it should be `on change` of textbox not on add more button. I tried `onchange=calculateTime()` but it is throwing an error. see fiddle: https://jsfiddle.net/pathik2012/o7jbft8a/57/ — Pathik Vejani, Aug 06 '19 at 15:29
@Mamun hey I want to add start time and end time like this: https://jsfiddle.net/pathik2012/45La1q0s/2/ with validations like end time should not be less than start time and next start time should not be less that last end time.. can you please help? — Pathik Vejani, Aug 12 '19 at 04:12

append last text-box value to next text-box using JavaScript

2 Answers2