Take value input range and print it on a div

0

I'm wanting to show some price data through inputs and javaScript.

Select products

<select class="form-control corrigForm" name="maquina" id="maquina">
   <option value="0" disabled selected>Seleccione una Maquina...</option>
   <option value="435€">Láser Diode +</option>
   <option value="455€">Láser Dualwave</option>
</select>

Show me the price of the product

<h5 id="MaquinaElegida">0€</h5>

Input where I show the Range value and the range

<div class="input-group formMarg2">      
  <input type="text" id="precio" class="form-control corrigForm" style="height: calc(2.55rem + 2px);text-align: center;" value="60">
  <div class="input-group-addon">Meses</div>
</div> 

  <input type="range" id="tiempo" class="myRange" name="points" min="36" max="60" value="60" step="12">

Here you have to show what I mention below

<h5 id="pvpRoyalty">0€</h5>

Script where I get the price of the product and show the value of the range in the input

 <script>
  $(document).on('change', '#maquina', function(event) {
    $('#MaquinaElegida').text($("#maquina option:selected").val());
  });
  $(document).ready(function() {
    $('#tiempo').change(function() {
    $('#precio').val($(this).val());
   });
  });
 </script>

So what I need is that when you select the value 36 in the range (you have to leave in <h5 id="pvpRoyalty">335€</h5> , if you choose the value 48, you will see <h5 id="pvpRoyalty">250€</h5> and finally if the value is 60 <h5 id="pvpRoyalty">200€</h5> . range only has those three positions and they are already printed in the input with id="precio" .

That can be done ?, especially that is without updating as what there is so far. Thanks

    
asked by Miguel 26.09.2018 в 11:38
source

2 answers

1

Ok, I still do not have very clear what you want to achieve in terms of the sum of your inputs, to put this aside maybe you should review How to create a minimal, complete and verifiable example.

But nevertheless to answer your final question, I propose that you apply the following logic.

If you have a series of values that you want to mean several values at the same time, use the redundancy and you want to print them on the page (both), either as in a shopping cart or a checkout. Work with varibles and create a system of cases in which if the value that returns is the same number, this new variable now has another value (see the example below).

  

NOTE : Better use integer values instead of a string to place the prices since you can add them later, the sign of the currency can be static as in the example.

As for entering on the label that you need the value of the slide that you present, I would recommend that you use bind() u on() instead of change() and work on a single variable since it is the final value.

  

Look at the following example:

$(document).ready(function(){

  /*Aqui cambio el input de las maquinas en la etiqueta h5*/
  
  $("#maquina").on("change", function(e){
  
    $("#precio span").html($(this).val())
  
  });
  
  /*-----------AQUI LOS CAMBIOS DE INTERES-----------*/
  
  $("#tiempo").on("input change", function(){
  
    var pvp; 
    var thisval = $(this).val();
  
    $("#tempsnap span").html(thisval);
    
    /*-----------SISTEMA DE CASOS (CON IF/ELSE)-----------*/
    
    if (thisval == 60) {
    
      pvp = 200;
      $("#pvpRoyalty span").html(pvp); //Imprimo la varible pvp en el span.
    
    }else if (thisval == 48) {
    
      pvp = 250;
      $("#pvpRoyalty span").html(pvp); // !!!
    
    }else if (thisval == 36) {
    
      pvp = 335;
      $("#pvpRoyalty span").html(pvp); // !!!
    
    }
  
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control corrigForm" name="maquina" id="maquina">
   <option value="0" disabled selected>Seleccione una Maquina...</option>
   <option value="435">Láser Diode +</option>
   <option value="455">Láser Dualwave</option>
</select>

<h5 id="precio">Precio: <span>0</span>€</h5>

<h5 id="tempsnap">Tiempo: <span>60</span> meses.</h5>

<h5 id="pvpRoyalty"><span>200</span>€</h5>

<input type="range" id="tiempo" class="myRange" name="points" min="36" max="60" value="60" step="12">

I hope you serve, greetings.

    
answered by 26.09.2018 / 13:28
source
0

If I understand you correctly, you can solve it with a simple switch of the value of range :

switch($(this).val()) {
    case "36":
        $('#pvpRoyalty').val("335€");
        $('#pvpRoyalty').html("335€");
        break;
    case "48":
        $('#pvpRoyalty').val("250€");
        $('#pvpRoyalty').html("250€");
        break;
    case "60":
        $('#pvpRoyalty').val("200€");
        $('#pvpRoyalty').html("200€");
        break;
    default:
        $('#pvpRoyalty').val("0€");
} 

I leave you here a fiddle

Note : I do not understand very well what you want to multiply (I say it by the title of your question)

    
answered by 26.09.2018 в 12:32