How to pass range type input form values for Javascript defined variables to perform conditions?

Asked

Viewed 761 times

1

I need to take values from a form of type "range" and through the values of each <input> of <form> want to store in a var Javascript within the page itself <html> so that within a function verifica() I can perform conditions like if and elseor switch checking a value from an average 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>

inserir a descrição da imagem aqui

javascript input condition range

  • have you done anything? Where is your difficulty? Put the code to see how it is.

  • Okay @Nelsonaguide

  • Take a look ai @Nelsonaguide the end missed another photo because I have no reputation yet but it’s only the <input type="Submit" onclick="validate();" data-Theme="b" value="Submit" />

  • http://meta.pt.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485

  • Take a look over there if that’s really what you need, I hope it helps.

1 answer

1


Guy gives you to scroll 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’s a little example working. https://jsfiddle.net/ugrte2ys/

How much your other doubt, would have to see being js, without this it gets difficult, but you also did not use the comparison operator in if, if you will control the redirect in js use button and not Ubmit, it is recommended that you research on debugging methods, some errors you could easily see, here’s 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 of 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>
    <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>

  • I liked the idea, however, I’m not being able to call the function to test the values in <p>. I’m suspecting that <scritpt> is not being called. How should it look inside html? You know how and I can do to call a url within a condition in the same script of the total variable?

  • This code fragment you put in place where your sum variable is and to call a url you use Location.href="sua_url", but still it is good you post your code why.

  • Nelson, I still can’t reproduce the results on my local pages. I posted the code if you want to take a look.

  • I edited the answer take a look there, just one more thing tries to leave the code always formatted, I hardly saw your js because it was like text up there

  • I used the code you sent, it now calls the page, but it seems that the sum variable is not adding up the ranges and so it will always be below average not entering the other conditions. In this example I tried to use the switch to test all possibilities. Reduce the form to make it easier to understand the code. Can you check? I updated the codes on the question!

  • It gives a console.log(sum) or Alert(sum) if you prefer and you will see what is happening, when I say debug or debug, as you prefer, I refer to the console and the browser Debugger, in which case it is now logic problem with the above commands you will be able to notice the problem.

  • I tested using Debugger with the log and does not crash and always returns 0, so I think there is some more detail that is not going through the inputs.

  • Nelson, you were doing code maintenance and able to find the apparent cause of the problem... When I deactivate inside the <head> tag script type="text/javascript" src=".. /js/jquery.mobile-1. 4.5.min. js" in the browser returns to normal appearance without the effects and then the parameters pass and the conditions work. So, maybe now is to check a way to validate this . js so that it works in mobile and tb in browser. I’ll edit the code to show you how my head is.

  • When I leave the js line the image I am attaching in debugging appears as "Concat error".

  • this problem is due to the incompatibility of jquery-mobile1.4.5 with its version of jquery, switch to version 1.x or 2.x or use jquery migrate plugin, as for the sum, note that when your html is generated its inputs range no longer exist now type number is only change in the function to type=number in each() that will take the sum value. The answer is edited. I hope you can solve your problem now

  • And if you need more help with incompatibility, I think it would be good to open up a new question, because we are falling outside the scope of your original question.

  • Good for what you already passed me the proposal of the question already works. Now is understand why the Smartphone appears in the log Nan. The browser already works. Thanks!

Show 7 more comments

Browser other questions tagged javascript input condition range

You are not signed in. Login or sign up in order to post.