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