Olá,
tenho um input chamado gasto, e o valor digitado não pode ser maior que 1.000,00, se for maior que 1.000,00 aparece um modal na tela.
Poderiam me ajudar em como fazer esse javascript, por favor?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeVocê pode usar o addEventListener()
, a partir daí pode pegar o valor e fazer a verificação:
INPUT_OBJECT.addEventListener('input', function (evento) {
alert(this.value);
});
Qualquer dúvida estou a disposição!
Há uma solução simples e fácil para o seu problema, utilizando apenas html5.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="number" required="true" name="price" min="0" max="1000.00" step=".01">
</form>
</body>
</html>
Explicação das tags
Caso você queira que o seu input tenha valores negativos, basta remover o atributo min.
Espero ter ajudado e bem vindo ao stackoverflow!
nesse
if($('#gasto').val() >= 1000.00){
deixe o valor como numéricose a entrada no input for com virgula, tem que trocar a virgula por ponto para poder fazer comparação
$(function() {
$(".btn-gasto").click(function() {
if($('#gasto').val() >= 1000.00){
//alert('Para o seu consumo iremos tratar o seu orçamento e projeto de forma exclusiva. ');
$("#myModal").modal('show');
event.preventDefault();
} else{
alert('menor que 1000.');
}
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form name="calculadora" method='post' action='https://www.sunkit.com.br/resultado/'>
<input type="tel" id="gasto" name="gasto" placeholder="R$ 0.00" required>
<button type="submit" name="submit" class="btn-gasto">Calcular</button>
</form>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Consumo acima de R$1000.00 </h4>
</div>
<div class="modal-body">
<p>Para o seu consumo iremos tratar o seu orçamento e projeto de forma exclusiva.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
O método
preventDefault
, que como o nome já dá ideia, previne o comportamento default do objeto, ou seja cancela o comportamento que os elementos geralmente tem na página, então, nesse caso, evita que o clique do botão submeta o formulário
max
? E o que sabe de javascript? Já tentou fazer alguma coisa? Qual foi a dificuldade?max
?