Way to update css properties on-the-fly based on form content?

Question

Hey all,

I have a form on a website, in which one of the inputs is to be used to enter hexadecimal colour codes to be entered into a database.

Is there any way for the page to dynamically update itself so that if the user changes the value from "000000" to "ffffff", the "colour" CSS property of the input box will change immediately, without a page reload?

Answer 1

Not without Javascript.

With Javascript, however...

<input type='text' name='color' id='color'>

And then:

var color = document.getElementById('color');
color.onchange = function() {
    color.style.color = '#' + this.value;
}

If you are going to go the Javascript route, though, you might as well go all out and give them a color picker. There are plenty of good ones.

Answer 2

CSS properties have corresponding entries in the HTML DOM, which can be modified through Javascript.

This list is somewhat out of date, but it gives you some common CSS pieces and their corresponding DOM property names.

Granted, a JS lib like like jQuery makes this easier...

Answer 3

You can use Javascript to achieve that.

As an example:

Your HTML:

<input type="text" id="test" />

Your JS:

var test = document.getElementById('test');
test.onchange = function(){
    test.style.color = this.value;
};

But this doesn't check the user's input (So you would have to extend it).