1

Boa tarde, preciso retornar um resultado em um input. como faço?

HTML

<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

Vou digitar no input cc-number e me retorna o resultado no cc-flag

JAVASCRIPT

var input = document.querySelector('input.cc-number')
var result = document.querySelector('input.cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = CardType.cardType(e.target.value)
  result.innerHTML = JSON.stringify(cards)
}

OBS: Ele funciona corretamente retornando para um DIV. Mas preciso que volte para um INPUT

2
  • Você quer colocar o valor de um input dentro de outro input? Commented 5/05/2019 às 19:37
  • Isso mesmo... o primeiro input faz uma busca em um arquivo .js e retorna um valor. preciso que esse valor seja retornado dentro do input Commented 5/05/2019 às 19:58

1 Resposta 1

1

A propriedade innerHTML é para modificar o html que fica dentro de uma tag. O valor de um input fica em value e não em innerHTML, por isso não está conseguindo mudar.

Outra coisa, você não tem classes .cc-number e .cc-flag, mas sim ids. Então, no seu seletor, você deve colocar # no lugar de ..

Segue o exemplo:

var input = document.querySelector('input#cc-number')
var result = document.querySelector('input#cc-flag')

input.addEventListener('change', onInputChange)
input.addEventListener('input', onInputChange)

function onInputChange (e) {
  var cards = CardType.cardType(e.target.value)
  result.value = cards
}
<div class="form-group">
  <input class="form-control input-lg" type="text" name="cc-number" id="cc-number">
</div>
<div class="form-group">
  <input class="form-control input-lg" name="cc-flag" id="cc-flag" type="text">
</div>

<script src="https://polvo-labs.github.io/card-type/dist/card-type.js"></script>

5
  • Não quero duplicar o valor em outra input... quero que o resultado apareça no input Commented 5/05/2019 às 19:59
  • Estou usando este exemplo: polvo-labs.github.io/card-type/example . Neste exemplo ele retorna dentro de uma div. Preciso que retorne dentro de input como disse acima Commented 5/05/2019 às 20:00
  • Agora eu entendi. Modifiquei o exemplo para fazer o que quer. Commented 5/05/2019 às 20:04
  • Funcionou sim! Perfeitamente.... Commented 5/05/2019 às 20:43
  • Faz a busca por 4 ou 55, por exemplo. Algumas buscas não retornam resultado, pois o número do cartão precisa ser válido. Quando não existe resultado, o input fica vazio. Commented 5/05/2019 às 20:45

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 .