0

Boa tarde, estou com dificuldade em encontrar uma forma para adicionar value a um input readonly sem eliminar o value que já está nesse input. O meu layout é constítuido por dois inputs e um botão, o primeiro input é um input normal type text, o segundo é um input readonly e tenho um botão Add para adicionar o value do primeiro input ao segundo que é readonly e eu estou a tentar com que o value do input readonly nunca seja eliminado por mais values que sejam adicionados. Obrigado :)

Este é o layout: Este é o layout

Este é o meu script:

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

Este é o meu código HTML:

<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" onclick="setValue()" 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-->
2
  • oque vc deseja fazer com o value que ja esta no input? pq assim vai receber um novo value certo? você quer somar esses valores ou separar por virgular? oque realmente vc precisa Commented 17/04/2019 às 14:17
  • Queria separar por virgula, peço desculpa por não ser claro na minha pergunta
    – Afonso
    Commented 17/04/2019 às 14:18

1 Resposta 1

1

Eu utilizei apenas uma validação e concatenação para chegar ao resultado de uma olhada no exemplo, se caso input2 não tem valor eu atribuo o valor do primeiro input ao input2, caso o input2 já tenha valor eu só faço a concatenação:

function setValue() {
    var nome = document.getElementById('inputNome').value;
    var input2 = document.getElementById('textNome');
   
    if(input2.value == '' || input2.value == null){
      input2.value = nome;
    }else {
      input2.value += ','+nome;
    }
};
<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" onclick="setValue()" 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 />

1
  • Resultou muito bem, muito obrigado :)
    – Afonso
    Commented 17/04/2019 às 14:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .