I am new here and I have a simple (hopefully) problem at hand. I am trying to figure out how to switch classes on my "Apply" button once an end-user clicks inside a form field/element.
The demo test page I have up can be found here - http://www.iconpayment.com/test/Untitled-2.html
Also does having the image as a background or inline img src make a difference?
Thanks!
Noel
$('.button').click(function(event){
$(this).removeClass('button').addClass('button-disabled');
});
removeClass function of course, not the first selectorIn case you end up having more than one button with the same class name, it would be a good idea to address the button's ID when replacing the classes (using the same snippet as cpharmston):
$('#button-div').click(function(event){
$(this).removeClass('button').addClass('button-disabled');
});
...I am trying to figure out how to switch classes on my "Apply" button once an end-user clicks inside a form field/element.
$('form > input').click(function() {
$('#button-div').removeClass().addClass('button-disabled');
});
As a usability side-note, it might be a good idea to re-enable the button if the form inputs' 'blur' event is triggered and nothing has been edited (i.e. the form hasn't been made 'dirty').
To answer your first question...
Give all of your clickable form elements the class "affectsApply", or alternatively, just select them all via a selector (#formId input, #formId textarea, etc.)
then just use something like the following:
$(document).ready(function(){
$('.affectsApply').click(function(){
$(formElement).addClass('highlight');
});
});
If you are wanting to switch to and from you can use toggle():
$(".toggleButton").toggle(
function() {
$(this).removeClass("enabled").addClass("disabled");
},
function() {
$(this).removeClass("disabled").addClass("enabled");
}
);
Of course this does not track the state in anyway, so you might want a flag or something to track that if needed.
Example here: http://docs.jquery.com/Events/toggle
