Question

Hard to define the title ^^

I want to have to input fields. For example: one where you type in a color (string) and another for the code of the color (varchar).

Like this: |Green| |#657EC9| (just random color-code)

I do not want to learn how to find the color-code but how to match a value or variable with another. It was just an example.

What i wanna know is how I in the best way auto generate one of the fields when I fill in the second. When I type ‘green’ in the first field I want the code to automatically appear in the second and vice versa. I just want to do it for a few colors.

I am very new to PHP, HTML and Javascript and could need some good advice about how I should handle the problem.

Thank you

Answer 1

I would tend to just map values to an object literal, so:

var colors = {
    Green:'#657EC9',
    Red:'#00ffff'
}

Now you could get your value with colors[fieldInputVal] where fieldInputVal might be ‘Green’ or ‘Red’ although of course you’d have to test if there actually was a property there. Object literals are the main reason I rarely find a use for switch statements in JS.

As for the event JS, I’m going to be lazy and go with JQuery rather than explain attachEvent vs. addEventListener which would be necessary if you’re supporting IE8 or below. If you want to normalize for that yourself and skip JQuery, look up ‘addEvent contest’ on quirksmode.org

$('.input_one').change( function(){
    //note: only fires after the field loses focus - you tab out or focus another field
    var inputVal = $(this).val();
    if(colors[inputVal] !== undefined){
        $('.input_two').val(colors[inputVal]);
    }
} );

note: I did not test this code for syntax goofs.

If you want to be more flexible and accept ‘green’ or ‘Green’, I would just capitalize the first character before you use it for the lookup. To do the lookup on every character add, you’d have to look up the keyup or keydown events (I prefer keyup to avoid breaking the browsers back when somebody holds a key down).