1

Estou com precisando pegar valores de um formulário do tipo "range" e através dos valores de cada <input> do <form> quero armazenar em uma var do JavaScript dentro da própria página <html> para que dentro de uma função verifica() eu possa realizar condições do tipo if e elseou switch verificando um valor a partir de uma média dos valores pela quantidade de perguntas e direcionar para outra página <html> de acordo com os resultados.

Código do Head:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.4.5.min.js"></script> -->
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript"></script>

Código JS:

<script>  

validar = function(){

    var soma = 0;
    $('input[type=range]').each(function() {
        soma += parseInt($(this).val());
    });


    // depurando variável com da média
    soma = (soma/3);

    switch (soma) {
        case 0:
            location.href="depreop01.html";
            break;
        case 1:
            location.href="depreop02.html";
            break;
        case 2:
            location.href="depreop03.html";
            break;
        default:
            location.href="questionario.html";        
    }

        } // fim da função validar 
</script> 

Código HTML:

<form name="form" target="blank">
    <label class="ui-hidden-accessible"></label>
    <p>1. PERGUNTA</p>
    <input type="range" name="fum-dep-1" id="fum-dep-1" min="0" max="10" value="10" step="1" data-highlight="true">

    <label for="slider" class="ui-hidden-accessible"></label>
    <p>2. PERGUNTA</p>
    <input type="range" name="fum-dep-2" id="fum-dep-2" min="0" max="10" value="10" step="1" data-highlight="true">

    <label for="slider" class="ui-hidden-accessible"></label>
    <p>3. PERGUNTA</p>
    <input type="range" name="fum-dep-3" id="fum-dep-3" min="0" max="10" value="10" step="1" data-highlight="true">
    <br>
    <input type="button" name="submit" onclick="validar();" value="Enviar" id="submit" />
    </form>

inserir a descrição da imagem aqui

5
  • já fez alguma coisa? Onde está sua dificuldade? Posta o código para vermos como está. Commented 26/02/2017 às 19:45
  • Certo @NelsonAguiar Commented 26/02/2017 às 19:48
  • Dá uma olhada ai @NelsonAguiar o final faltou mais uma foto pq não tenho reputação ainda mas é só o <input type="submit" onclick="validar();" data-theme="b" value="Enviar" /> Commented 26/02/2017 às 20:16
  • meta.pt.stackoverflow.com/questions/5483/…
    – MagicHat
    Commented 26/02/2017 às 20:41
  • Dá uma olhada ali se é isso mesmo que você precisa, espero que ajude. Commented 26/02/2017 às 21:03

1 Resposta 1

1

Cara dá para você percorrer os inputs para fazer a soma desta forma:

var total = 0;
$('input[type=number]').each(function() { //number devido ao código gerado pelo jquery mobile.
    total += parseInt($(this).val());
});

Aqui tem um pequeno exemplo funcionando. https://jsfiddle.net/ugrte2ys/

Quanto sua outra duvida, teria de ver ser js, sem isso fica difícil, mas você também não usou o operador de comparação no if, se vai controlar o redirecionamento no js use button e não submit, é recomendável que você pesquise sobre métodos de depuração, alguns erros você poderia ver com facilidae, aqui está o código que provavelmente funcionará.

 <script>
     validar = function() {
         var soma = 0;
         $('input[type=number]').each(function() { //number devido ao código gerado pelo jquery mobile.
             soma += parseInt($(this).val());
         });
         console.log(soma);
         if (soma < 45) {
            location.href = "sua_pagina";
         }
         else{
             location.href="sua_pagina"
         }

     }      
 </script>

Exemplo de head que funciona:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script  src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

form:

 <form name="myform" target="blank">
    <label class="ui-hidden-accessible"></label>
    <p>1. PERGUNTA</p>
    <input type="range" name="fum-dep-1" id="fum-dep-1" min="0" max="10" value="0">

    <label class="ui-hidden-accessible"></label>
    <p>2. PERGUNTA</p>
    <input type="range" name="fum-dep-2" id="fum-dep-2" min="0" max="10" value="0">

     <label class="ui-hidden-accessible"></label>
     <p>3. PERGUNTA</p>
     <input type="range" name="fum-dep-3" id="fum-dep-3" min="0" max="10" value="0">
     <input type="button" name="submit" onclick="validar();" value="Enviar" id="submit" />

</form>
12
  • Gostei da ideia, porém, não estou conseguindo chamar a função para testar os valores no <p>. Estou suspeitando que o <scritpt> não esteja sendo chamado. Como deve ficar dentro do html? Você sabe como e posso fazer para chamar uma url dentro de uma condição no mesmo script da variavel total? Commented 27/02/2017 às 1:03
  • Esse fragmento de código você coloca no lugar onde está sua variável soma e para chamar uma url você usa location.href="sua_url", mas todavia é sempre bom você postar seu código por que sem ver o que você fez fica difícil de dizer alguma coisa. Commented 27/02/2017 às 2:17
  • Nelson, ainda não conseguir reproduzir os resultas nas minhas páginas locais. Postei o código, se quiser dá uma olhada. Commented 27/02/2017 às 5:26
  • Editei a resposta dá uma olhada lá, só mais uma coisa tenta deixar o código sempre formatado, quase não vi seu js pois estava como texto lá em cima Commented 27/02/2017 às 15:29
  • Usei o código que você mandou, ele agora chama a página, mas parece que a variável soma não está somando os ranges e então sempre vai ficar abaixo da média não entrando nas outras condições. Neste exemplo tentei usar o switch para testar todas possibilidades. Reduzir o form pra facilitar o entendimento do código. Pode verificar? Atualizei os códigos na pergunta! Commented 27/02/2017 às 17:51

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