• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

Highlight changed form field

Hi

I'm looking for a quick and dirty way to change the style on form fields.

There is no need to remember the old value, so if a change is made and then changed back, the highlight still remains.

Must cover text boxes, radios and dropdowns.

JQuery /  JavaScript.

Andy
0
Andy Green
Asked:
Andy Green
  • 5
  • 3
1 Solution
 
Ivo StoykovCommented:
What about:

$(selector).addClass('your_class_name');

Open in new window

HTH
Ivo Stoykov
0
 
Andy GreenAuthor Commented:
Thanks, I'll give it a try

Andy
0
 
Andy GreenAuthor Commented:
Re reading my OP and I may have over simplified this.

If a selection is made on a Radio button list then only the selected needs to be highlighted, not any previously selected ones.

Andy
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Kishan ZunjareSr. Software EngineerCommented:
Through jQuery/HTML/CSS live example of CSS Styling Radio Button/checkbox

http://jsfiddle.net/viralpatel/p499h/

Hope this helps
-Kishan
0
 
Andy GreenAuthor Commented:
Hi Ivo

Your code doesn't work. I have this working:

               $("input").change(function () {
                  $(this).addClass('highlight');
               });

               $("textarea").change(function () {
                   $(this).addClass('highlight');
               });

But this applies the highlight to every radio button option that is selected, As per my update I only want the selected one to be highlighted.

Also the text box changes colour, but I'd like to expand this to remove the style if the text box is cleared.

Any help would be appreciated

Andy
0
 
Andy GreenAuthor Commented:
This is a JSFiddle example showing the problem.

http://jsfiddle.net/AndyGreen/QVLZN/3/

Can anyone help?

ANdy
0
 
Kishan ZunjareSr. Software EngineerCommented:
Hi Andy,

You need to have parent over labels and then you can remove class and add class to selected radio;

Your working solution will be;
jQuery
$('label').click(function(){  
$(this).parents('fieldset').find('label').removeClass('highlight');
$(this).addClass('highlight');
})

Open in new window


HTML
<fieldset>
<label>
    <input id="rdo1" name="rdo1" type="radio" value="1" />
    My Radio 1
    </label>
<br/>
    <label>
    <input id="rdo2" name="rdo1" type="radio" value="1" />
    My Radio 2
    </label>
<br/>
    <label>
    <input id="rdo3" name="rdo1" type="radio" value="1" />
    My Radio 3
    </label>
</fieldset>

Open in new window

0
 
Kishan ZunjareSr. Software EngineerCommented:
0
 
Andy GreenAuthor Commented:
Thanks - Just what I needed. I got the textbox bit working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now