Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Aumentar e diminuir valor do input com jQuery

17-02-2011 19:32

Nesse script, o valor de um input text é aumentado ou diminuído ao clicar no mais + e menos -

<script type="text/javascript" src="jquery.js"></script>


<input type="text" id="alvo" name="" value="0" /> <input type="button" value="+" onclick="$('#alvo').val(parseInt($('#alvo').val())+1)"> <input type="button" value="-" onclick="$('#alvo').val(parseInt($('#alvo').val())-1)">

Deixo também esse exemplo bem completo em jQuery
http://css-tricks.com/number-increment-buttons/
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 9

Aumentar e diminuir valor do input com jQuery

09-03-2011 15:39

Certo. E como faço o tratamento para limite de valores?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Aumentar e diminuir valor do input com jQuery

09-03-2011 15:49

Esse script que passei foi só uma base. O que realmente tem uma estrutura melhor e que dá para limitar a quantidade está abaixo

http://css-tricks.com/examples/InputNumberIncrementer/
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 9

Aumentar e diminuir valor do input com jQuery

09-03-2011 15:51

Resolvi assim:

<script>     $("#mais").click(function(){         $('#mudeValor').val(parseInt($('#mudeValor').val())+1); return false;     });     $("#menos").click(function(){        if($("#mudeValor").val()!=0){$('#mudeValor').val(parseInt($('#mudeValor').val())-1);} return false;     }); </script>


<a id="mais" href="">+</a>     <input type="text" value="1" readonly="readonly" id="mudeValor">     <a id="menos" href="">-</a>

Obrigada.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Aumentar e diminuir valor do input com jQuery

09-03-2011 16:03

Fiz umas melhorias nele. Adicionei primeiro o # para o valor do href, caso contrário vai dar refresh no documento.

Também coloquei toda a função dentro do

$(document).ready(function() {   });

Caso contrário não é inicializada.

Também coloquei um limite para frente, para que o valor não passe de 10, e um aviso quando o valor chegar ao final

<script> $(document).ready(function() { $("#mais").click(function(){   if($("#mudeValor").val() < 10){ $('#mudeValor').val(parseInt($('#mudeValor').val())+1); return false; } else { $('#limite').html('só vai até 10'); return false; }   }); $("#menos").click(function(){ $('#limite').html(''); if($("#mudeValor").val()!=0){$('#mudeValor').val(parseInt($('#mudeValor').val())-1);} return false; }); }); </script>


<a id="mais" href="#">+</a> <input type="text" value="1" readonly="readonly" id="mudeValor"> <a id="menos" href="#">-</a> <div id="limite"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 9

Aumentar e diminuir valor do input com jQuery

09-03-2011 16:49

Excelente.
Muito obrigada!
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado