How to pass range form input values to variables defined in JavaScript to perform conditions? [closed]

Navigation
1

I need to get values from a form of type "range" and through the values of every <input> of <form> I want to store in a var of JavaScript within the <html> page itself so that within a function verifica() I can perform conditions of type if and else or switch by checking a value from a mean of the values by the amount of questions and direct to another page <html> according to the results.

Head code: 

<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>

JS Code: 

<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>

HTML code: 

<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>

    
asked by anonymous 26.02.2017 / 20:33

1 answer

1

Dude you can go through the inputs to make the sum this way: 

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

Here is a small example working. link

As for your other doubt, you would have to see js, without this it is difficult, but you also did not use the comparison operator in if, if you are going to control the redirect in js use button and do not submit, it is recommended that you search about debugging methods, some errors you could see with facilidae, here is the code that will probably work. 

 <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>

Example head that works: 

<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><linkrel="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:

<formname="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>
    
26.02.2017 / 22:02
"A data type is an abstract concept defined by a set of logical properties." - What does this mean? How to implement my program in Java to be Multithread? [closed]