Display selected input value

Question

I have two inputs with their respective ID’s, I would like Alert to be displayed the value entered in the selected field, so if I am typing in field 1 will be displayed the value in Alert referring to field 1, if I am typing in field 2 is displayed the value in Alert for field 2.

Idea update

I saw the code of Juniornunes7 and I had an idea and I would like to do something new, I’m sorry. See the image:

Thank you

Answer 1

To show something whenever the value of input is changed (typed, deleted, pasted), you can use the event onInput.

$('#input-id').on('input', function() {
    alert($(this).val());
});

It is also possible to use the change, it will be triggered only when the user "deselects" the input.

$('#input-id').on('change', function() {
    alert($(this).val());
});

See a functional example in Jsfiddle

Answer 2

I believe that’s what you need according to the description of your image, I just didn’t put any warning, but I imagine you were just wanting to test...

$("#principal").on('change keyup paste', function(){
  var input = $('.check:checked').val();
  $("#"+input).val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <label>Master</label>
  <input id="principal" type="text">
</div>
<br />

<div>
  <input type="radio" name="check" class="check" value="campo1" checked>
  <label>campo1</label>
  <input class="campo" id="campo1" name="campo1" type="text" readonly>
</div>

<div>
  <input type="radio" name="check" class="check" value="campo2">
  <label>campo2</label>
  <input class="campo" id="campo2" name="campo2" type="text" readonly>
</div>