Get input value whenever changed

0

I have a <input id="quantity" name="quantity" min="1" max="3" type="number"> element where I store its value in a var qty = $('#quantity').val(); variable by default the value is 1.

I would like that whenever I change the amount of this input it updates in real time the variable qty since I will pass it as a parameter in another function in a URL eg: $('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 doing so the new value of the variable qty is not updated in real time in the href attribute of my button.

Thanks to all who can help, thank you.

    
asked by anonymous 16.02.2016 / 20:49

3 answers

1

Try to use .keyup() , this will insert the link as soon as you type any number.

Try this 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><inputid="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 execute the function whenever the key is released, but this does not require the user to leave the field or click off the screen, as in the case of .on('change') mentioned.

    
17.02.2016 / 07:17
3

Just add the value directly this way:

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

This will always take the current value of the quantity element.

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

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

It would look like this:

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

If the intent is to get only when it modifies, the change event is sufficient, regardless of how the change comes in.

Now, continuing the focus of the question, if, with the suggested change $('#quantity').val() , the qty variable is no longer used, the change event is no longer meaningful. You could delete this snippet of code.

[edit]

Complete example:

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

I think this 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>
    
17.02.2016 / 01:55