use jquery to get id of input field to pass back color change

Question

hoping somebody can point me in the right direction. I know there are similar questions, but I havn't found one that deals directly with what I'm trying to achieve. I'm trying to get the id of an input field so I can change font-color.

<div id="red">
    <input id="redA" type="text">
    <input id="redB" type="text">
    <input id="redC" type="text">
</div>
<div id="outerContainer">
    <div id="innerContainer">
        <div id="blue">
             <input id="blueA" type="text" onBlur="check()">
             <input id="blueB" type="text" onBlur="check()">
             <input id="blueC" type="text" onBlur="check()">
        </div>
     </div>
</div>

<script>
    function check(){
        var v=$(this).val();
        if ( v=="red" ) { $(this).css({"color":"red"})
        if ( v=="green" ) { $(this).css({"color":"green"})
        if ( v=="blue" ) { $(this).css({"color":"blue"})
    }
</script>

I know this is a bit long winded, but hopefully it can be seen what im trying to do Thanks

Answer 1

you can do it like this

<div id="red">
    <input id="redA" type="text">
    <input id="redB" type="text">
    <input id="redC" type="text">
</div>
<div id="outerContainer">
    <div id="innerContainer">
        <div id="blue">
             <input id="blueA" type="text" onblur="check(this)">
             <input id="blueB" type="text" onblur="check(this)">
             <input id="blueC" type="text" onblur="check(this)">
        </div>
     </div>
</div>

JQuery

function check(vObj){
    console.log($(vObj));
    var v=$(vObj).val();
    if ( v=="red" ) { $(vObj).css({"color":"red"}); }
    if ( v=="green" ) { $(vObj).css({"color":"green"}); }
    if ( v=="blue" )  { $(vObj).css({"color":"blue"}); }
}

here's the jsfiddle for this http://jsfiddle.net/afPrc/109/

the reason your fiddle was not working was because you were not passing the object of your textbox to the function. when you do $(this) inside the function, it gets the object of window instead of the textbox.

Answer 2

I would do it like this fiddle: http://jsfiddle.net/mzzq6ef9/

<div id="red">
        <input id="redA" type="text">
        <input id="redB" type="text">
        <input id="redC" type="text">
    </div>
    <div id="outerContainer">
        <div id="innerContainer">
            <div id="blue">
                 <input id="blueA" type="text">
                 <input id="blueB" type="text">
                 <input id="blueC" type="text">
            </div>
         </div>
    </div>

$("input").focus(function(){
    var v = $(this).closest('div').attr('id');
    if ( v =="red" ) { 
        $(this).css({"color":"red"});
    } else if ( v=="green" ) { 
        $(this).css({"color":"green"});
    } else { 
        $(this).css({"color":"blue"});
    }
});

Answer 3

okay, I find that I have been a bit dopey here by not using 'this' in any way that's correct.

In case anybody comes this and needs an easy answer, like I did. My mistake was that I was trying to identify the element by specifically gaining and using the id. I did not need to do this as 'this' comes in handy here.

By putting 'this' in brackets of the function request, it tells the function it means this one!!

an easy example

<style>
    #ColBox { width:40px; height:40px; }
</style>
<script>
    function func(el){
        var col=$(el).val();
        if ( col=="blue" || col=="red" || col=="green" ){
            $(el).css({"color":col});
            $("#ColBox").css({"background":col});
        } else {
            $(el).val("try again").css({"color":"black"});
        }
    }
</script>
<div>
<div>hello</div>
<div id="container">
    <div id="inner">
        <input id="one" type="text" onBlur="func(this);">
        <input id="two" type="text" onBlur="func(this);">
        <input id="three" type="text" onBlur="func(this);">
    </div>
    <div id="ColBox">
    </div>
</div>
</div>