Change Element Style on Select

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Change Element Style on Select

Post 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
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Change Element Style on Select

Post 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.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Change Element Style on Select

Post 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?
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Change Element Style on Select

Post 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 :)
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Change Element Style on Select

Post 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:
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Change Element Style on Select

Post 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
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Change Element Style on Select

Post 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.
Post Reply