0

Gostaria de saber como posso fazer a validação e return de um input com base no valor dele.

Tenho a seguinte div com input e button:

    <div class="input-group form-frete">
      <input class="form-control" type="text" placeholder="00000-000"name="txtFrete" />
      <button class="btn btn-light" onclick="javascript: btn_click()">Calcular</button>
    </div>

Gostaria que ao inserir o valor 35500000 no input txtFrete e clicar em calcular, fosse retornado na div logo abaixo o valor: 55

<div>
O valor do frete é: "Aqui seria o 55"
</div>

Comecei fazendo um js, mas que acredito estar completamente errado:

let valorFrete = "55";
let cep = txtFrete.value;

function btn_click() {
if (cep == txtFrete.value) {
console.log = ("55 reais");
} else {
console.log = ("Tente outro cpf")
}
}

2 Respostas 2

0

Você pode fazer umas alterações para facilitar. Primeiramente no HTML, adicionando um ID no Input e a chamada para a função no botão:

<div class="input-group form-frete">
  <input id="txtFrete" class="form-control" type="text" placeholder="00000-000"name="txtFrete" />
  <button class="btn btn-light" onclick="btn_click();">Calcular</button>
</div>

A div de retorno deve ter um ID para ser acessada e receber o valor, assim:

<div id="resultado">
    O valor do frete é: "Aqui seria o 55"
</div>

E a parte do Javascript, assim:

<script type="text/javascript">
function btn_click(){
   var vFrete = 55; // Colocando um valor fixo apenas para teste
   var vCep = document.getElementById('txtFrete').value;
   var sRet = '';

   if (vCep == '35500000') {
      sRet = 'O valor do frete é: R$ ' + vFrete;
   } else {
      sRet = 'CEP inválido.';
   }

   document.getElementById('resultado').innerHTML = sRet;
}
</script>

Dessa forma você está pegando o valor digitado, vendo se é ele que você precisa, e retornando a mensagem para a div com o id "resultado".

3
  • Está retornando "Uncaught ReferenceError: btn_click is not defined at HTMLButtonElement.onclick (perfume1.html:162)" Quando clico no botão calcular. Na linha 162 tem: <button class="btn btn-light" onclick="btn_click();">Calcular</button> Commented 7/05/2019 às 15:54
  • Gabriel, Atualizei o código colocando a tag <script>. Por favor, veja se lhe atende. A variável da mensagem também estava errada, eu tinha colocado vCep mas alterei para vFrete Commented 7/05/2019 às 17:17
  • 1
    Muito obrigado amigo, funcionou perfeitamente! Commented 7/05/2019 às 18:44
0

Para fazer essa validação precisas de buscar o valor do input (textFrete) e comparar com o valor 35500000, e passa o respetivo resultada para a div.

E isso ficaria assim:

document.getElementById("calc_frete").addEventListener("click", myFunction);

function myFunction(event) {
  const default_txtFrete = '35500000';

  var txt_cpf = 'O valor do frete é: 55 reais';
  var input_txtFrete = document.getElementById('txtFrete').value; // Busca o valor no input

  if (input_txtFrete !== default_txtFrete) txt_cpf = 'Tente outro cpf';

  document.getElementById('frete_resultado').innerHTML = txt_cpf; // Preenche
}
<form id="form_id">
  Input: <input type="text" id="txtFrete" name="txtFrete" value="" placeholder="">
</form>
<button id="calc_frete">Calcular</button>

<div id="frete_resultado">
</div>

1
  • Muito obrigado Cristiano, funcionou conforme esperava! Commented 7/05/2019 às 18:44

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 .