Valhalla Legends Forums Archive | Web Development | Javascript Changing Inputbox colors

AuthorMessageTime
Imperceptus
I am trying to color the background color of input fields on a page using javascript
[code]
        function notifyDuplicates() {
            var el = document.getElementsByTagName('input');
            for (counter1 = 0; counter1 < el.length; counter1++) {
                var firstEl = el[counter1];
                if ((firstEl.type == 'text') && (firstEl.id.endsWith('TextBox1'))) {                 
                    for (counter2 = 0; counter2 < el.length; counter2++) {
                        var secondEl = el[counter2];
                        firstEl.style.background = ((firstEl.value == secondEl.value) && (counter1!=counter2))?'#FF8684':'#FFFFFF';
                        secondEl.style.background = ((firstEl.value == secondEl.value) && (counter2!=counter1))?'#FF8684':'#FFFFFF';
                    }
                }
            }
        }
[/code]
If my page looks like
[code]
Column1            Column2             
Value1                Value2
Value1                Value3
[/code]
The background for the element of Value1 ends up being colored red, but the the other Value1 Element does not.  Thoughts?
October 2, 2009, 8:43 PM
rabbit
Give an ID to everything and use GetElementByID
October 3, 2009, 3:35 PM
Myndfyr
Or use jQuery, the bestest javascript thingamajig EVER.
[code]
$('input[type=text]').css('background-color', 'red');
[/code]
This is a sample of turning all input text boxes to a background-color of red.

If you need more specificity, I suggest setting IDs:
[code]
if ($('#elem1').val() != $('#elem2').val())
    $('#elem1').css('background-color', 'red);
[/code]

Or you could always use this awesome jquery validation plugin.

Moral of the story: jQuery is the shit. :)
October 4, 2009, 7:45 AM
Imperceptus
Did some work on it and found that It was actually coloring the boxes correctly, but I had failed logic and the loop would uncolor. Will look into the jquery.  I have tried changing my ID's and going through just them but, .net seems to do some obfuscating on that part and even though I try to put <%=inputobject.clientid%> the compiler seems to hate it and blows up every time.  

Thanks for the suggestions, I looked into jQuery and it does look like the way of things for the future, but atm I dont know enough about it to feel comfortable plugging something.  I fixed my logic I think. I added a check to make sure the boxes weren't already flagged(red).

[code]
        function notifyDuplicates() {
            var el = document.getElementsByTagName('input');
            for (counter1 = 0; counter1 < el.length; counter1++) {
                var firstEl = el[counter1];
                if ((firstEl.type == 'text') && (firstEl.id.endsWith('TextBox1')==true)) {                 
                    for (counter2 = 0; counter2 < el.length; counter2++) {
                        var secondEl = el[counter2];
                        if ((firstEl.value == secondEl.value) &&
                            ((firstEl.style.background != '#FF8684') || (secondEl.style.background != '#FF8684')) &&
                            (counter1!=counter2)) {
                            firstEl.style.background = '#FF8684';
                            secondEl.style.background = '#FF8684';
                            break;
                        } else {
                            firstEl.style.background = '#FFFFFF';
                            secondEl.style.background = '#FFFFFF';                     
                        }
                    }
                }
            }
        }
[/code]
October 5, 2009, 3:09 PM
Grok
[quote author=MyndFyre link=topic=18081.msg183453#msg183453 date=1254642320]Or use jQuery, the bestest javascript thingamajig EVER.[/quote]

Agree.  Might also check out the Manning publishers book "jQuery in Action".
November 30, 2009, 11:29 PM
rabbit
Since my last post, I have in fact started using jQuery, and the description on the page Grok posted is right: I fell in love.

Anyway, I just noticed that you're checking with type AND id fields, which means either A) you're overdoing it or B) not using id properly.  Remember that id is supposed to be unique to each element.
December 1, 2009, 1:33 PM
Camel
Yes, you're not allowed to reuse ids. I don't think any browsers will expressly forbid you from doing it, but it's a violation of some standard.
December 2, 2009, 2:23 AM
rabbit
If you try to use GetElementById when you've reused ids, you'll get migraines.
December 2, 2009, 2:59 AM
Imperceptus
[quote author=rabbit link=topic=18081.msg183787#msg183787 date=1259674421]
Since my last post, I have in fact started using jQuery, and the description on the page Grok posted is right: I fell in love.

Anyway, I just noticed that you're checking with type AND id fields, which means either A) you're overdoing it or B) not using id properly.  Remember that id is supposed to be unique to each element.
[/quote]
Most of my dev code contains alot of sanity checks. So overdoing yes.  Yeah my id's are unique. 
December 2, 2009, 6:50 PM
rabbit
Sometimes you can approach insane from a different direction.  If your IDs are unique, you don't need to check the type.
December 2, 2009, 8:14 PM
Imperceptus
oh, yeah that does make some sense.
December 3, 2009, 12:30 AM
Grok
[quote author=rabbit link=topic=18081.msg183800#msg183800 date=1259784869]
Sometimes you can approach insane from a different direction.
[/quote]

If you were a famous person, this would get printed and catch on.
December 3, 2009, 6:46 AM
rabbit
[quote author=Grok link=topic=18081.msg183802#msg183802 date=1259822760]
[quote author=rabbit link=topic=18081.msg183800#msg183800 date=1259784869]
Sometimes you can approach insane from a different direction.
[/quote]

If you were a famous person, this would get printed and catch on.
[/quote]Well that's cool...I stole it from Terry Pratchett :P
December 3, 2009, 1:02 PM

Search