Change input color according to value

Asked

Viewed 1,045 times

2

Good afternoon Amigos

I have an input with the name of MARGIN, where a value is displayed according to some calculations that are made... I need the input to change the color to red if this value is less than 25, if it is larger it keeps its color (white)...

NOTE: I have the Value input, where this input the sellers manipulate the value of a product always trying to keep the margin above 25%, but if it lowers I want the color change, all this refresh.

<label for="valor_unitario">Vlr. Unit.</label>
<input type="text" name="valor_unitario" id="valor_unitario" style="text-align: center" required>

<label for="quantidade">Qtd.</label>
<input type="text" name="quantidade" id="quantidade" style="text-align: center" required>

<label for="valor_total">Vlr. Total</label>
<input type="text" name="valor_total" id="valor_total" readonly>

<label for="margem">Margem</label>
<input type="text" name="margem" id="margem" style="text-align: center" readonly>

In order not to be lost, the total value input shows the value of (unitary value * quantity).. what interests us is unitary value and margin

php javascript ajax

  • Can you post the code? is easier to search for a specific and simple solution for your case.

  • edited the question

  • You could "watch" the input with javascript, every time there was a change, change the background-color of the input. document.getElementById('input').addEventListener('input',function(e){ console.log('alterado');});

  • however as I would do in case to change only if the value is below 25?

  • A condition within this eventListener I believe would solve :) for example: if (input.value > 25){ //logica } else { //logica }

  • I gave a summary, but I think I can understand the logic hehe If this fits, I can post a version more explained as answer :)

  • I was doing this function but I don’t know what to wander window.onload = Function(){ $("#valor_unitario"). Blur(Function() { var margin = $('#margin'). val(); var bgcolor = margin < 25 ? '#B20000' '#fff'; Document.getElementById('margin').style.backgroundColor = bgcolor; } }

  • I posted a Codepen that does what you want, I hope! If I need to change :)

Show 3 more comments

2 answers

3


Since you are using Jquery, you can use change, it will check every time there is a change in the input and it will be able to apply some logic on top of that change.

In this Codepen, I did only in the first input, if you need to apply in others, just follow the same logic!

  • It’s almost that, my friend, but that way, as I change the value of "value_unitario" is that the margin input changes, there’s a whole tax formula behind that when I change the value of the "value_unitario" input it calculates and makes a margin, i need the margin input to change the color and not the unitario value, but who makes the margin input change value is the unitario value, got?

  • 1

    I get it, but the logic follows the same, you watch an input and then change the CSS into another input! I edited it now and you can see that the background of the input margin changes according to the value of the first input. Now the logic really needs to be implemented :)

  • Perfect friend, very helpful. Taking advantage of your intelligence, I wanted to know if you know how to do this... while I’m typing in an input will change another automatically, would be for this same system, I need that while I change the value of "valu_unitario", va automatically updating the margin field

  • 1

    For this you will change the input value, for example with margem.val() you have access to the value that is inside the input and can manipulate! I made another change in Codepen, see if you can understand! :D

  • perfect brother, congratulations on your humility in helping!

0

Use jQuery :) you can use "on change" with a class for code optimization. Then just add the "class" where you want to apply the colors. Follow an example:

$(document).ready(function(){

  $('.valor').on('change',function(){
    var valor = $(this).val();

    if(valor < 25){
      $(this).addClass("negativo").removeClass("positivo");
    }else{
      $(this).addClass("positivo").removeClass("negativo");
    }
  });
  
});
.negativo {
  background: red;
  color: #fff;
}

.positivo {
  background: green;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="valor_unitario">Vlr. Unit.</label>
<input type="text" name="valor_unitario" id="valor_unitario" class="valor" required>

The code does is to add a "positive" or "negative" class according to the value. You can create as many possibilities as you want. Positive, negative, neutral, etc.

  • 1

    Just don’t forget to remove the class, when changing the input value again doesn’t get the class there and end up giving conflict! :)

  • True! : ) I will edit.

Browser other questions tagged php javascript ajax

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