Send the value of one input to another input that is readonly

Question

I’m having trouble sending the value of an input to another input readonly, my goal is to add the text that is in the first input in the other input by clicking the Add button, I’m currently testing with Javascript but I’m a bit new when it comes to this language.

This is my layout:

This is my script:

$(".btnNomes").click(function () {
    var nome = $(".inputNome");
    $("#textNome").text(nome.val());
});

This is my code:

<div class="form-row"> <!--Nomes-->
    <div class="form-group col-md-5">
        <label for="inputNome">Nome</label>
        <input type="text" name="inputNome" class="form-control" id="inputNome" placeholder="Nome">
    </div>
    <button type="button" id="btnNomes" name="btnNomes"class="btn col-md-1 mx-1 px-0 my-auto btn-danger">Add</button> <!--Btn Add-->
    <input type="text" class="form-control col-md-5 my-auto" id="textNome" name="textNome" placeholder="Nomes..." readonly /> <!--Readonly Input-->
</div>

Thank you :)

Answer 1

Good Day I did using the getElementById and setting values.

function setValue () {
    var nome = document.getElementById('inputNome').value;
    document.getElementById('textNome').value = nome;
};

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div class="form-row"> <!--Nomes-->
    <div class="form-group col-md-5">
        <label for="inputNome">Nome</label>
        <input type="text" name="inputNome" class="form-control" id="inputNome" placeholder="Nome">
    </div>
    <button type="button" onclick="setValue()" id="btnNomes" name="btnNomes"class="btn col-md-1 mx-1 px-0 my-auto btn-danger">Add</button> <!--Btn Add-->
    <input type="text" class="form-control col-md-5 my-auto" id="textNome" name="textNome" placeholder="Nomes..." readonly/> <!--Readonly Input-->
</div>

Answer 2

Make the following change in your script:

$( document ).ready(function() {
	$("#btnNomes").click(function () {
		console.log('teste');
		var nome = $("#inputNome");
		$("#textNome").val(nome.val());
	});
});

<script
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
  integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous"></script>
<div class="form-row"> <!--Nomes-->
    <div class="form-group col-md-5">
        <label for="inputNome">Nome</label>
        <input type="text" name="inputNome" class="form-control" id="inputNome" placeholder="Nome">
    </div>
    <button type="button" id="btnNomes" name="btnNomes"class="btn col-md-1 mx-1 px-0 my-auto btn-danger">Add</button> <!--Btn Add-->
    <input type="text" class="form-control col-md-5 my-auto" id="textNome" name="textNome" placeholder="Nomes..." readonly /> <!--Readonly Input-->
</div>