apply event to an input with jQuery

Asked

Viewed 642 times

1

Well, I need to apply the event $(".margem").keyup(); only for input containing a value greater than 0.

Note that when changing the cost value the system applies the event $(".margem").keyup(); updating the input valor, but the second input value does not contain a margin and so it cannot be updated.

Does anyone know how to do this check?

$(document).ready(function() {

  // Verifica se o custo mudou
  $(".custo").on("keyup", function() {
    $(".margem").keyup();
  });


  // Faz o calculo do valor com base na margem
  $(".margem").on("keyup", function() {

    // Margem
    var margem = $(this).val();
    var custo = $('#custo').val();

    // Formata valor para pt-br
    calculo = margem + custo;

    // Atualiza input
    var inputValor = $(this).attr("valor");
    $("#" + inputValor).val(calculo).trigger('blur');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
custo:
<input type='text' class='custo' id='custo' name='custo' value='8'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor1' name='valor1' margem='margem1'>
<input type='text' class='margem lucro' id='margem1' name='margem1' valor='valor1' value='1'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor2' name='valor2' margem='margem2'>
<input type='text' class='margem lucro' id='margem2' name='margem2' valor='valor2'>

javascript jquery

  • In fact, you don’t need to check that the value is greater than zero in Javascript. Changes the "type" of your input to "number" and adds the property min = '1' no. But if you really want to use code to verify, use the function @Mathias wrote

2 answers

3


Hugo, the code below goes through all the elements that have the class .margem and checks that the element has a val(), if you own it applies the event keyup().

$(document).ready(function() {

  // Verifica se o custo mudou
  $(".custo").on("keyup", function() {
    $('.margem').each(function() {
      if ($(this).val()) {
        if (parseInt($(this).val()) > 0)
          $(this).keyup();
      }
    });
    //$(".margem").keyup();
  });


  // Faz o calculo do valor com base na margem
  $(".margem").on("keyup", function() {
    if ($(this).val() > 0) {
      // Margem
      var margem = $(this).val();
      var custo = $('#custo').val();

      // Formata valor para pt-br
      calculo = margem + custo;

      // Atualiza input
      var inputValor = $(this).attr("valor");
      $("#" + inputValor).val(calculo).trigger('blur');
    } else {
      var inputValor = $(this).attr("valor");
      $("#" + inputValor).val("").trigger('blur');
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
custo:
<input type='text' class='custo' id='custo' name='custo' value='8'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor1' name='valor1' margem='margem1'>
<input type='text' class='margem lucro' id='margem1' name='margem1' valor='valor1' value='1'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor2' name='valor2' margem='margem2'>
<input type='text' class='margem lucro' id='margem2' name='margem2' valor='valor2'>

  • I tested it here, and almost that. only has a problem when the margin input is 0 it applies the event, the want has to check if the value of the input is empty and if it is greater than 0.

  • @Hugoborges ok, corrected, note that if you clear the margin now, the value of the input will also be clear.

  • perfect, thank you very much

0

I think the simplest solution is to simply return if it has no value:

$(".custo").on("keyup", function() {
$(".margem").keyup();
});

    $(".margem").on("keyup", function() {
    	
        // Margem
        var margem = $(this).val();

        // (!margem) funciona tanto para 0 como para "", pois ambos resultam false na condição
        if(!margem) return;

    	var custo = $('#custo').val();
    	
    	// Formata valor para pt-br
    	calculo = parseInt(margem) + parseInt(custo);
    	
        // Atualiza input
        var inputValor = $(this).attr("valor");
        $("#" + inputValor).val(calculo).trigger('blur');
        
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
custo:
<input type='text' class='custo' id='custo' name='custo' value='8'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor1' name='valor1' margem='margem1'>
<input type='text' class='margem lucro' id='margem1' name='margem1' valor='valor1' value='1'>

<br>
<br>
<br> Valor X Margem<br>
<input type='text' class='valor valores' id='valor2' name='valor2' margem='margem2'>
<input type='text' class='margem lucro' id='margem2' name='margem2' valor='valor2'>

Besides, your code is concatenating the values in the sum, so I suggest (if you want to add, as I suspect), change the following line:

calculo = margem + custo;

for:

calculo = parseInt(margem) + parseInt(custo);

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.