Disabling/Enabling buttons using jQuery

Question

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

Answer 1

$('.button').click(function(event){
    $(this).removeClass('button').addClass('button-disabled');
});

Answer 2

you can use the onfocus event as well with the code cpharmston posted just before i wanted to click the "post yout answer" button..

Answer 3

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');
  });
});

Answer 4

In 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');
});

Answer 5

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

Answer 6

...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').

Answer 7

Thank you all very much for the assistance! Much appreciated!