apply event to an input with jQuery

Question

apply event to an input with jQuery

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

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

Notice that by changing the cost value the system applies the $(".margem").keyup(); event by updating the input valor , but the second value input does not contain a margin and therefore can not be updated.

Does anyone know how to do this verification?

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

asked by anonymous 18.04.2017 / 13:54

2 answers

0

I think the simplest solution is simply to 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'>

Furthermore, 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;

To:

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

18.04.2017 / 14:09

PHP Security Stored XSS and SQL Injection How does communication between classes work from client / user requests in MVC? [closed]

score 3 · Accepted Answer

Hugo, the code below traverses all elements that have the class .margem and verifies that the element has a val() , if it has it it applies the keyup() event.

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