Fill Second Input automatically when First

Question

I have a input I’m going to name input-1, and there I will insert this: 12:00

Having a second input I’m going to name input-2, is possible when inserting into input-1: 12:00

He in the input-2 can automatically fill in the time I put in input-1 but with two more hours.

Example:

Coloco 10:00 in the input-1 and in the input-2 turn up: 12:00.

It is possible to do this?

Answer 1

You could create a function to get the value of the first input and define a second variable to add, in your case, the value of 2. So it will take the value, and add with the number defined in the variable.

function calc()
{
  var a = "2";
  var b = valor.value;

  total.value = parseFloat(a) + parseFloat(b) + ':00';
}

Valor: <input type="time" id="valor" onkeypress="calc()"><br/><br/>
Total: <input type="time" id="total">

In this case I put the :00 only to follow your example, but it is irrelevant if you do not need to use the same.

Answer 2

Yes,

You should add a Event Listener in the input-1 of types

• Keydown (when the key is pressed but not released) or,
• Keyup (when the key is released) or,
• Keypress (when key is pressed)
• or Blur (when exiting the input)

And make this trigger a function that handles the data from input-1 and insert them into input-2.

Taking the example of the following code:

Javascript with Jquery to make it easy to view Binding of the event:

$(document).ready( function(){
    $('#input-1').keyup(function (e) {
        var patt = /([0-9]{1,2}:[0-9]{2})/;
        // Testando se o valor digitado já é algo como nn:nn
        if (patt.test(e.target.value)) {
            var strsplit = e.target.value.split(':');
            var hora = Number(strsplit[0]) + 2;
            var min = (strsplit[1]);
            var stringfinal = '';
            // ex. se hora = 24 então vira 00, se hora = 25 então vira 01;
            if (hora > 23) {
                hora = hora - 24;
            }
            if (hora < 10) {
                stringfinal += '0' + hora;
            } else {
                stringfinal += hora;
            }
            stringfinal += ':' + min;
            $('#input-2').val(stringfinal);
        } else {
            // Faz nada...   
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-1" type="text">
<input id="input-2" type="text">

This should give the planned effect, the function I did was very basic and can be greatly improved, is more a proof of concept.

Events can be measured even without jQuery. More information can be found at Input on the MDN and Keyupevent at MDN

I hope this answers your question.