Page 1 of 1

Change Element Style on Select

Posted: Sun Oct 19, 2008 11:35 pm
by omniuni
Hi All,

I am writing a page, and I have a setup where I have a form of id="stickyform" and it is currently set to class="classic-yellow". I have a drop-down where the user can select several different colors, each one is linked to a class, for example "classic-green". I want to change the class of the form to reflect the one selected in the drop down.

In other words, as you select a different color (class), the class of the form should change to the color (class) selected.

I don't know very much JavaScript, so could someone please propose the easiest to implement solution?

I suspect it will be something along the lines of the following added to each <option> element:

onClick="target element with id 'stickyform' and modify style to be 'insert-style-here' "

Thank you very much,
OmniUni

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 2:09 am
by jaoudestudios
Do you want to do it with JS? or PHP?

Why not do it with php and js, that way if they dont have js turned on it will still work. If you dont know js then I definitely recommend JQuery as it is very powerful and easy to use.

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 2:11 am
by omniuni
The style will update when the user posts, of course, via PHP, but I want the style to be immediately reassigned with JavaScript. It should be a very simple command, using a framework would be overkill for merely changing the class of one element, would it not?

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 2:16 am
by jaoudestudios
I dont think that much over kill, JQuery minified (compacted) is only 50k ish (can remember exactly), and it would solve cross browser DOM issues. Plus you could use it later on for making the site more sexy/fresh! Animations, AJAX - within a few minutes.

Just a thought :)

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 2:50 am
by omniuni
Well, thanks, but while I did check into jquery, it really is overkill. For what I am wanting, it should be one line of JS. I am building the site to load as quickly as possible, this is just a nicety so that when a user creates a sticky note and selects a different color, the background of the editing area changes to reflect that. It's not a terribly big deal if it doesn't work, but there should be no browser stuff here, as the JS should be simple. I just don't know JS!

:banghead:

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 3:58 am
by omniuni
OK, so I have been looking around:

Specifically, what I need to do is modify the className attribute of the <form id="stickyform" class="classic-yellow"> to be the one selected in the drop-down. Thus, I need the onchange attribute set and, I think the this.value.

<select onchange="form.className=this.value"> ..... or something.... because that doesn't work.

8O

OMG. That did it. Nevermind this. I can't believe in my exasperated kvetching I found the solution.

-OmniUni

Re: Change Element Style on Select

Posted: Mon Oct 20, 2008 4:04 am
by jaoudestudios
Haha. Well done :)

Sorry was not more helpful, I dont know javascript that well either. I use more JQuery for that sort of stuff.