Pick up input value whenever changed

Question

I have an element:

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

where I store its value in a variable:

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

by default the value is 1.

I wish that every time I changed the amount of that input he updated the variable in real time qty because I will pass it as a parameter in another function in a URL, exmeplo:

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

I used the function:

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

But by doing this the new value of the variable qty is not updated in real time in the attribute href of my button.

Answer 1

Just add the value directly this way:

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

So you will always take the current value of the element quantity.

A question, unrelated to the focus of the question, why not just use "change"?

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

Would look like this:

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

For if the intention is to take only when it modifies, the event change is sufficient, regardless of how the amendment.

Now, continuing with the focus of the question, whether, with the suggested change $('#quantity').val(), the variable qty no longer used, the event change makes no sense. I could delete this part of the code.

[Edit]

Full example:

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

Answer 2

Try to use the .keyup(), this will insert into the link at the time you enter any number.

Test it out here:

$('#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>

The basic function, without the extra fixes, is here:

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

The keyup will perform the function whenever the key is released, but this does not require the user to exit the field or click off the screen, as in the case of .on('change') mentioned.

Answer 3

I think that way it should work:

<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>