Jump to content
Fórum Script Brasil
  • 0

Exibir resultado de Switch Case dentro do Input


Question

Fala galera, é o seguinte, estou criando um página dentro da plataforma Blogger e nessa página eu tenho um formulário (calculadora), onde após o preenchimento e o cálculo é exibido dois resultado.

Um número que é calculado através uma função JQuery e um nivel de experiencia que é analisado através de um switch case levando em consideração o número do cálculo.

O resultado tanto do número quanto do nivel de experiencia são exibidos em dois inputs dentro do formulário, o problema é que, o resultado do cálculo eu consegui fazer aparecer dentro do input, mas o resultado do switch case não aparece no input, quando testei para exibir o resultado do switch case dentro de um span funcionou (o switch case está funcionando), então queria saber como consigo exibir o resultado switch case dentro de um input para ficar padronizado.

Quem poder ajudar agradeço.

<!-- CALCULADORA DE CARGA ALAR -->
<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    $("#resultado").val(cargaAlar);

<!-- VERIFICAR NIVEL DE EXPERIENCIA -->    
  switch (true) {
	  case (cargaAlar <= 1.1): $(".experiencia").html("Iniciante"); break;
	  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
	  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
	  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 		} 
	});
});
</script>

<!-- FORMULARIO DE PREENCHIMENTO E RESULTADO -->
<form action="" method="post" name="calcform">
   <fieldset>
     <label>Peso da Pessoa (kg):</label>
     <input id="pessoa" name="pessoa" type="text" value="70" />

     <label>Peso do Equipamento (kg):</label>
     <input id="equipamento" name="equipamento" type="text" value="12" />
     
     <label>Tamanho do Velame (ft):</label>
     <input id="velame" name="velame" type="text" value="190" />

     <label></label>
     <input class="botao" type="button" value="Calcular" />
     
     <label></label>
     <label>Carga Alar: <input disabled id="resultado" value=""></label>
     <label>Nível de Experiência: <input disabled id="experiencia" value=""></label>
	 <!-- No span o resultado aparece normal <label>Nível de Experiência: <span class="experiencia"></span></label> -->
   </fieldset>
</form>

 

Edited by DieoRLS
Erro ortográfico
Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Primeiro sugiro que você coloque nos input com id de "resultado" e  "experiencia" coloque um readonly para não ser possível o client escrever nele. 

Ao clicar no botão remova o atributo "disabled" dos inputs "resultado" e "experiencia" para liberá-los e continua normalmente os cálculos. E um erro no  `switch` que você fez ao colocar os valores no input "experiencia" você colocou como classe assim: $(.experiencia), porém ele é um id e seria assim:  $(#experiencia).

<script type="text/javascript">
    $(document).ready(function(){
      var botao = $(".botao");
      
      botao.on("click", function(){
          $('#resultado').removeAttr('disabled')
          $('#experiencia').removeAttr('disabled')
          var pessoa = $("#pessoa").val();
          var equipamento = $("#equipamento").val();
          var velame = $("#velame").val();
          var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
        var cargaAlar = calculo.toFixed(2);
        $('#resultado').val(cargaAlar)
        
    
      switch (true) {
          case (cargaAlar <= 1.1): $("#experiencia").val("Iniciante"); break;
          case (cargaAlar > 1.1 && cargaAlar <= 1.3): $("#experiencia").val("Intermediário"); break; 
          case (cargaAlar > 1.3 && cargaAlar <= 1.5): $("#experiencia").val("Avançado"); break;
          case (cargaAlar > 1.5): $("#experiencia").val("Experiente"); break;
      default:
        console.log('Desculpe, houve erro no cálculo, tente novamente.');
             } 
        });
    });
<form action="" name="calcform">
    <fieldset>
      <label>Peso da Pessoa (kg):</label>
      <input id="pessoa" name="pessoa" type="text" value="70" />
 
      <label>Peso do Equipamento (kg):</label>
      <input id="equipamento" name="equipamento" type="text" value="12" />
      
      <label>Tamanho do Velame (ft):</label>
      <input id="velame" name="velame" type="text" value="190" />
 
      <label></label>
      <input  class="botao" type="button" value="Calcular" />
      
      <label></label>
      <label>Carga Alar: <input disabled readonly id="resultado" value=""></label>
      <label>Nível de Experiência: <input disabled readonly id="experiencia" value=""></label>
    </fieldset>
 </form>

Espero ter ajudado, é a minha primeira vez aqui.

Edited by TheHatter
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148907
    • Total Posts
      645002
×
×
  • Create New...