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
Change Element Style on Select
Moderator: General Moderators
- jaoudestudios
- DevNet Resident
- Posts: 1483
- Joined: Wed Jun 18, 2008 8:32 am
- Location: Surrey
Re: Change Element Style on Select
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.
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
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?
- jaoudestudios
- DevNet Resident
- Posts: 1483
- Joined: Wed Jun 18, 2008 8:32 am
- Location: Surrey
Re: Change Element Style on Select
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
Just a thought
Re: Change Element Style on Select
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!

Re: Change Element Style on Select
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.
OMG. That did it. Nevermind this. I can't believe in my exasperated kvetching I found the solution.
-OmniUni
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.
OMG. That did it. Nevermind this. I can't believe in my exasperated kvetching I found the solution.
-OmniUni
- jaoudestudios
- DevNet Resident
- Posts: 1483
- Joined: Wed Jun 18, 2008 8:32 am
- Location: Surrey
Re: Change Element Style on Select
Haha. Well done
Sorry was not more helpful, I dont know javascript that well either. I use more JQuery for that sort of stuff.
Sorry was not more helpful, I dont know javascript that well either. I use more JQuery for that sort of stuff.