1

Eu tenho um elemento:

<input id="quantity" name="quantity" min="1" max="3" type="number">

onde eu guardo o valor dele numa variável:

var qty = $('#quantity').val();

por padrão o valor é 1.

Gostaria que sempre que alterado a quantidade desse input ele atualizasse em tempo real a variável qty pois vou passa-lo como parâmetro em outra função em uma URL, exmeplo:

$('meu-botao').attr('href','/busca/quantidade='+qty).

Utilizei a função:

var qty = 0;
$('#quantity').on('change keyup paste click',function() {
    qty = $(this).val();
});  

Mas ao fazer isso o novo valor da variavel qty não é atualizada em tempo real no atributo href do meu botão.

3 Respostas 3

4

Apenas adicione o valor diretamente dessa forma:

$('meu-botao').attr('href','/busca/quantidade='+$('#quantity').val())

Assim sempre pegará o valor atual do elemento quantity.

Uma pergunta, não relacionada com o foco da pergunta, por que não usa apenas "change"?

$('#quantity').on('change keyup paste click',function() {

Ficaria assim:

$('#quantity').on('change',function() {

Pois se o intuito é pegar somente quando modifica, o evento change é suficiente, independente de como provier a alteração.

Agora, continuando com o foco da questão, se, com a mudança sugerida $('#quantity').val(), a variável qty não for mais usada, o evento change deixa de ter sentido. Poderia eliminar esse trecho do código.

[edit]

Exemplo completo:

$('#quantity').on('change',function() {
    $('meu-botao').attr('href','/busca/quantidade='+$('#quantity').val());
}
3
  • Show não tinha pensado nisso, vou testar da forma que citou. 'change keyup paste click' usei após várias tentativas frustradas haha inclusive vi em uma questão do stack em inglês. 16/02/2016 às 20:09
  • não funcionou :( Eu preciso que seja atualizado em tempo real no dom no caso no href do botão também, pois estou usando uma plataforma saca? 16/02/2016 às 20:18
  • não sei como fez.. não posso dizer nada.. na prática deveria funcionar. coloquei um exemplo completo... 16/02/2016 às 20:20
2

Tente utilizer o .keyup(), isso irá inserir no link no momento em que digitar qualquer número.

Teste isso aqui:

$('#quantity').keyup(function () {
  
  // Se não for número muda para nada 
  if(!$.isNumeric($(this).val())){
     $(this).val('');   
  }
  
  // Se for maior que máximo altera para o máximo
  if($(this).val() > $(this).attr('max')){
     $(this).val( $(this).attr('max') );   
  }
  
  // Se for menor que o minimo (mas diferente de nada, porque se apagar é nada) muda para o minimo
  if($(this).val() < $(this).attr('min') && $(this).val() != ''){
     $(this).val( $(this).attr('min') );   
  }
  
  // Se for diferente de nada ele muda o link para o obtido
  // Se for igual ao nada o link não será modificado
  if($(this).val() != ''){
     qty = $(this).val();
  }
  
  // Insere o link como TEXT, altere isto!
  // Apenas para visualização!
  $('demostracao').text('/busca/quantidade='+qty);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="quantity" name="quantity" min="1" max="3" type="text" value="1">
<br>
<demostracao></demostracao>

A função básica, sem as correções extras, esta aqui:

$('#quantity').keyup(function () {
  qty = $(this).val();
  $('meu-botao').attr('href','/busca/quantidade='+qty);
}

O keyup irá executar a função sempre que a tecla é solta, mas isso não exige que o usuário saia do campo ou clique fora da tela, como no caso do .on('change') mencionado.

2

Acho que dessa forma deve funcionar:

<input id="quantity" name="quantity" min="1" max="3" type="number">
<div id="divRetorno"></div>

<script>
$('#quantity').on('change',function() {
    qty = $(this).val();
    $.ajax({
        type:'GET',
        url: "/busca/quantidade="+qty,
        success: function(result){
            console.log(result)
            $("#divRetorno").html(result);
        }
    });

});
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .