• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Kishan ZunjareCommented:
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 ZunjareCommented:
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 ZunjareCommented:
0
 
Andy GreenAuthor Commented:
Thanks - Just what I needed. I got the textbox bit working.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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