1
Good at the code :
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Documento sem título</title>
<!-- PLUGINS -->
<link href="/plugins/animate/animate.min.css" rel="stylesheet">
<link href="/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<!-- THEME CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="/css/custom.css" rel="stylesheet">
</head>
<section class="bg-grey-50 border-bottom-1 border-grey-200 relative">
</br>
<div class="container">
<div class="col-md-12 col-xs-12 text-center">
</br>
<form class="form-horizontal" method="post" action="http://eloprime.com/vitorias" name="vitoriast_add">
<div class="form-group col-md-6">
<h3>1. Selecione sua Liga atual</h3>
<div class="col-md-12">
<img src="img/rank/bronze.png" id="imgAtual" class="img-responsive center-block" width="192" height="192">
<p class="text-center" id="lblAtual">BRONZE</p>
</div>
<strong class="col-md-12">Liga</strong>
<div class="col-md-12">
<select class="form-control" id="eloAtual" name="ligaAtual">
<option value="Bronze">Bronze</option>
<option value="Prata">Prata</option>
<option value="Ouro">Ouro</option>
<option value="Platina">Platina</option>
<option value="Diamante">Diamante</option>
</select>
</div>
</br>
</div>
<div class="form-group col-md-6" style="padding-bottom:-5px;">
<h3>2. Selecione a Fila desejada</h3><br><br>
<div class="col-md-12">
<img src="img/rank/solo.png" id="imgFila" class="img-responsive center-block ">
<p class="text-center" id="lblFila">Solo/Duo</p>
</div>
<strong class="col-md-12">Fila</strong>
<div class="col-md-12 ">
<select class="form-control" id="filaDesejada" name="ligaDesejado">
<option value="Solo/Duo">Solo/Duo</option>
<option value="Flex 5x5">Flex 5x5</option>
<!--<option value="flex3">Flex 3x3</option>-->
</select>
</div>
</br>
</div>
<div class="col-md-8 col-md-offset-2">
<h3>3. Selecione a quantidade de vitórias desejadas.</h3>
<div id="slider"></div>
<p class="text-center" id="vitorias"><strong>2 partidas selecionadas</strong></p>
<input type="hidden" name="qtd" value="" id="qtd">
</div>
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label class="control-label">Valor do Serviço</label>
<div class="input-group">
<span class="input-group-addon">R$</span>
<input type="hidden" class="form-control" placeholder="0,00" id="total" value="" name="valor_total">
<input type="text" class="form-control" placeholder="0,00" id="total1" value="" disabled>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Contratar</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Javascript -->
<script src="/plugins/jquery/jquery-3.1.0.min.js "></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js "></script>
<script src="/js/core.min.js "></script>
<script src="/plugins/owl-carousel/owl.carousel.min.js "></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
var lblAtual = $("#lblAtual"),
eloAtual = $("#eloAtual"),
imgAtual = $("#imgAtual"),
divAtual = $("#divAtual"),
rankFolder = "img/rank/",
lblFila = $("#lblFila"),
imgFila = $("#imgFila")
$(eloAtual).on("change", function () {
$(imgAtual).attr("src", rankFolder + eloAtual.val().toLowerCase() + ".png")
$(lblAtual).html(eloAtual.val())
pegarValor(eloAtual.val(), divAtual.val(),$("#qtd").val())
return false;
})
$(divAtual).on("change", function () {
$(imgAtual).attr("src", rankFolder + eloAtual.val().toLowerCase() + ".png")
$(lblAtual).html(eloAtual.val())
pegarValor(eloAtual.val(), divAtual.val(),$("#qtd").val())
return false;
})
$(filaDesejada).on("change", function () {
var valor = $(filaDesejada).val(),
lbl = "",
img = ""
if (valor === "Flex 5x5"){
lbl = "Flex 5x5"
img = "flex5"
}
if (valor === "Solo/Duo"){
lbl = "Solo/Duo"
img="solo"
}
$(lblFila).html(lbl)
$(imgFila).attr('src', rankFolder + img + ".png")
})
$( "#slider" ).slider({
values : [2],
slide: function( event, ui ) {
$("#vitorias").html("<strong>"+ui.value+ " partidas selecionadas </strong>")
$("#qtd").val(ui.value)
console.log(event)
pegarValor(eloAtual.val(), divAtual.val(),$("#qtd").val())
},
min:2,
max:15
});
})
function pegarValor(tier, div,val) {
$.post("valor.php", {
t_atual: tier,
l_atual: div,
qtd: val,
tipo: "vitoria"
}, function (data) {
$("#total").val(data)
$("#total1").val(data)
console.log(data)
})
}
</script>
<body>
</body>
</html>Quantity selection bar is not appearing as in img:
was supposed to be like this:
the part of the code where the problem is:
<div class="col-md-8 col-md-offset-2">
<h3>3. Selecione a quantidade de vitórias desejadas.</h3>
<div id="slider"></div>
<p class="text-center" id="vitorias"><strong>2 partidas selecionadas</strong></p>
<input type="hidden" name="qtd" value="" id="qtd">
</div>
opa mano I called the 2 and changed the input, but it did not work .
– Ming
But I managed to arrange otherwise .
– Ming