How to change input border-color, with jQuery, depending on its value?
Solution 1
Just trigger the event:
$("input").change(function() {
// ...
}).trigger("change");
DEMO: http://jsfiddle.net/9B5SX/1/
Solution 2
I'd suggest:
$('input').on('change', function(){
var v = parseInt(this.value, 10);
$(this).css('border', function(){
if (v < 7) {
return '5px solid #f00';
}
else if (v == 7) {
return '5px solid #0f0';
}
else if (v > 7) {
return '5px solid #f90';
}
else {
return '5px solid #000';
}
});
}).change();
Though honestly, given that every situation seems to require a border-width
of 5px
and border-style
of solid
, I'd set those parts in the CSS:
input {
border-width: 5px;
border-style: solid;
}
And simply update the border-color
in the jQuery:
$('input').on('change', function(){
var v = parseInt(this.value, 10);
$(this).css('border-color', function(){
if (v < 7) {
return '#f00';
}
else if (v == 7) {
return '#0f0';
}
else if (v > 7) {
return '#f90';
}
else {
return '#000';
}
});
}).change();
And, finally, just because I sometimes can't help myself (and while this approach can be taken, it's not one I can honestly recommend...), with added conditional operators:
$('input').on('change', function(){
var v = parseInt(this.value, 10);
$(this).css('border-color', function(){
var v = parseInt(this.value,10);
return isNaN(v) ? '#000' : v < 7 ? '#f00' : v == 7 ? '#0f0' : '#f90';
});
}).change();
References:
Solution 3
Same issue here. On my case, the input was a table column and it was displayed for every table row. With the next code I managed to change only one input color, not all when I changed the value for one.
$('input[type=number]').each(function () {
/* Change border color depending on the input value */
var value = parseInt(this.value, 10);
if (value != 0) {
$(this).css('border-color', function () {
return value ? 0 : '#bfbfbf', '#f32d83';
});
}
else {
$(this).css('border-color', '#bfbfbf');
}
});
Hope it helps
Lasha
Updated on May 11, 2020Comments
-
Lasha about 4 years
I have question about jQuery. I have code below which works fine; it changes
input
border-color
depending on its value, which is typed and entered. But if ininput
's value on page-load it does not change thatborder-color
. How can I make theborder-color
change from the beginning, following page-load?Thank you :)
<input type="text" class="col" value=""> // When the <input>'s value changes $("input").change(function() { // If the value is less than 7, add a red border if ($(this).val() < 7) { $(this).css("border", "5px solid red"); } // Else if the value is equal to 7, add a green border else if ($(this).val() == 7) { $(this).css("border", "5px solid green"); } // Else if the value is greater than 7, add an orange border else if ($(this).val() > 7) { $(this).css("border", "5px solid orange"); } // Else if the value is anything else, add a black border else { $(this).css("border", "5px solid black"); } });
-
Sikshya Maharjan about 11 yearsIt is if the value could conceivably be
NaN
after theparseInt()
, never trust your users, after all (though I did hesitate to retain theelse
for the same reason). -
VisioN about 11 yearsNo no, I am not about
NaN
, I mean leavereturn '#000'
simply withoutelse
:) -
Sikshya Maharjan about 11 yearsOh! I see what you mean, yes; in that case the
return
would only be executed/encountered if no other conditions were met...gosh, I should go get some sleep... :D -
VisioN about 11 yearsIt's time for Eurovision now ;)
-
Sikshya Maharjan about 11 yearsWell, sleep it is, then! ;)
-
Lasha about 11 yearsVisioN & David thank you for replys... But i have another problem... Your codes both are working on fiddle... But when i copy it to my file, does not work... I included jquery-1.9.1.min.js and everything did perfect on code but it doesn't work anyway :((( what should i do???
-
Sikshya Maharjan about 11 yearsWhat's different in your page? Is your jQuery wrapped in a
$(document).ready(function (){/* your code in here */});
-
Lasha about 11 yearsDavid Thomas O my god... Shame to me :D:D:D:D Yes i missed that part :D:D Now everything is perfect!!! Thank you very much!!!