Ir ao conteúdo
  • Cadastre-se
AlanWake123

Validar formulário usando jquery sem rerfesh

Recommended Posts

Bom dia amigos do fórum estou precisando de uma ajuda no meu código.

 

Eu desejo inserir um número no segundo campo (input: digite a quantidade) e a partir desse numero gerar um valor no terceiro campo.

 

No caso eu insiro o número 1 e no campo seguinte é gerado o valor 10, só que eu gostaria de fazer isso sem dar refresh e nem usar qualquer botãona página , é possível fazer isso?

 

<html>
    
           <title>Adsim - Teste de JS</title>
            
            <!-- caminho do jquery na maquina local -->
            <script  type="text/javascript" src="jquery.js"> </script>
            <!-- caminho da validação do jquery -->
            <script type="text/javascript" src="jquery.validate.js"> </script>
            <script type="text/javascript">
            $(document).ready(function(e){
                    alert("Jquery funcionando normalmente");
                });
            
            </script>
        </head>
  <body>
<form name="formdados" onSubmit="return ChecarFormulario();">
<tr>
                   <td>
                       <select name="Ultra" onchange="run()">
                           <option value="0" selected="selected">Selecione um produto</option>   
                     <option value="1"> Coca-cola</option>   
                     <option value="2"> Pepsi</option>   
                     <option value="3"> Fanta</option>   
                     <option value="4"> Pureza</option>
                     <option value="5"> Soda</option>
                       </select>
                   </td>
                   <td><input type="text" name="textnome" placeholder="Digite a quantidade"  > </td>
                   <td><input type="text" placeholder="Valor deve vir da consulta do Endpoint" > </td>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Ricardo Schmidt Bittencourt Olá, seja bem vindo em nosso Fórum do Clube do Hardware.

 

Bom, não sei se entendi muito bem sua pergunta. mas vamos lá.

Você quer digitar um valor em um campo e aparecer gerar outro valor em outro campo. OK. 

O que não entendi, é:  você coloca 1 e aparece 10.   e se coloca 2? aparece 10 ou seria 20?

 

A lógica do código é bem simples você vai ter que usar a função on()  com keyup( quando aperta na tecla).

 

Veja este exemplo:

$(document).ready(function(){
  var form = $("#formdados");
  var qtd = $("#qtd");
  var valorGerado = $("#valor2");
  var btn = $("p");
  
  qtd.on("keyup",function(){
  	 valorGerado.val(qtd.val() * 10);
     if(qtd.val().length == 0){
     	valorGerado.val("");
     }
  });
  
  btn.on("click", function(){
  	alert(form.serialize());
  });
  
});

A parte que interessa você é   esta:


  qtd.on("keyup",function(){
  	 valorGerado.val(qtd.val() * 10);
     if(qtd.val().length == 0){
     		valorGerado.val("");
     }
  });
  
 

Note que quando é digitado o valor no campo qtd, é setado o valor do outro campo. 

No caso ali eu coloquei o valor digitado vezes 10.   então..    1 seria 10,   2 seria 20... e daí por diante.

O bloco de IF testa, se o campo qtd tiver vazio, o outro campo é zerado.

 

O restante do código ali em cima é só de testes, para saber o que estará enviando no formulário.

PS:  eu coloquei ID nos campos para que o código funcionasse.

 

Veja funcionando online: https://jsfiddle.net/j7sc92fh/

 

Quando abrir o link, selecione um produto no campo select,  insira o número 1 no campo de escrever e aperte no botão verde.( o botão verde eu fiz só para você ver a string de dados que a função  serialize() faz.   É uma função muito útil quando você quer submeter vários campos do formulário via ajax sem ter que digitar campo a campo no código.

 

PS2:  NO meu exemplo não usei ajax. pois na verdade não precisa de ajax para fazer o que você quer. Mas vai precisar do ajax  CASO você queira enviar os dados do formulário para um arquivo php por exemplo... 

 

Aí nesse caso, tens que usar a função  $.ajax() Aí é outro caso.. se se quiser posso explicar com mais detalhes.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, muitíssimo Obrigado,

 

com relação a lógica eu pretender alterar ela, mas agora eu já consigo fazer sozinho graças a tua ajuda.

 

valeu

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caro amigo estou com outra dúvida. 

 

Estou tentando fazer assim, eu tenho um select e dois input.

No select estão as opções coca e pepsi, no primeiro input é para pessoa digitar a quantidade, se caso a pessoa selecionou pepsi, e no campo input(quantidade) a pessoa digitou 1 dai e dai apareceria 5 no campo input(preço)

no caso a pessoa selecionou coca e no campo input(quantidade) a pessoa digitou 1 e dai apareceria 6 no campo input(preço)

Ah vou colocar meu código aqui.

Sei que é pedir demais, mas poderia me dar uma ajuda?

<html>
   <body>
         <!-- caminho do jquery na maquina local -->
         <script  type="text/javascript" src="jquery.js"> </script>
         <!-- caminho da validação do jquery -->
         <script type="text/javascript" src="jquery.validate.js"> </script>
         <script type="text/javascript">
      
            $(document).ready(function()
            {
               var form = $("#formdados");
               var valor1 = $("#valor1");
               var valor2 = $("#valor2");
               var btn = $("p");
  
               valor1.on("keyup",function()
               {
                  valor2.val(valor1.val() * 1);
            
                     if(valor1.val().length == 0)
                     {
                        valor2.val("");
                     }
               });
               btn.on("click", function()
               {
               alert(form.serialize());
               });
  
            });
         
         </script>
               
               <form name="formdados" >
<tr>
                   <td>
                       <select name="Ultra" onchange="run()">
                           <option value="0" selected="selected">Selecione um refrigerante</option>   
                     <option value="1"> Coca-cola</option>   
                     <option value="2"> Pepsi</option>   
                       </select>
                   </td>
                   <td> <input type="text" name="valor1" id="valor1" placeholder="Digite a quantidade"  /> </td>
               <td> <input type="text" name="valor2" id="valor2" placeholder="Digite o preco do refrigerante"/></td>
</tr>
</form>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@AlanWake123 Vejo que você simplesmente copiou meu exemplo!!!

Isso por que você não retirou os testes que eu coloquei para ver os valores que serão enviados.

Enfim, se você quer setar um valor de acordo com a escolha do select e não com o valor digitado no input, precisas usar um switch case, setando o valor do input de acordo com o selecionado.

 

Por exemplo:

$('#produtos').on('change', function(){
    	 var selecionado = $('#produtos option:selected').val();
         switch(selecionado) {
                case '1':
                    valorGerado.val(5).prop('readonly', true);
                break;
                case '2':
                    valorGerado.val(6).prop('readonly', true);
                break;
                 case '3':
                    valorGerado.val(7).prop('readonly', true);
                break;
                 case '4':
                    valorGerado.val(8).prop('readonly', true);
                break;
                 case '5':
                    valorGerado.val(9).prop('readonly', true);
                break;
                default:
           
            }
        });

PS adicionei um ID ao campo select.

PS2: a função prop() vai servir para deixar o campo apenas em modo leitura, pois se o lance é setar um valor fixo, não se pode alterar manualmente.  No caso, se você quer fazer um calculo de quantidade vezes preço podes colocar dentro CASE.

 

Por exemplo:

Veja funcionando: https://jsfiddle.net/j7sc92fh/2/

 

case '1':
     valorGerado.val(5).prop('readonly', true);
     qtd.on("keyup",function(){
        valorGerado.val(qtd.val() * 5);
     });
break;   

 

Veja funcionado: https://jsfiddle.net/j7sc92fh/3/

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×