CODEWITHSUNDEEP
jquerycssxhtml
Frank
Frank

Reputation: 1056

Jquery Form Field Focus Change Submit Button Class

I have the following form:

<input name="q" value="" class="qa-search-field">
<input type="submit" value="Search" class="qa-search-button">

I am trying to get the submit button's class to change when the qa-search-field is active by adding the class .qa-search-button-active, and then removing it if the search form is not active, meaning the cursor is not on there and blinking.

Cant figure out how to code this in Jquery.

Upvotes: 0

Views: 1225

Answers (3)

kst
kst

Reputation: 1518

How about this late solution ? :)

$(".qa-search-field").focus(function () {
    $('.qa-search-button').removeClass('qa-search-button').addClass('qa-search-button-active');
});

$(".qa-search-field").blur(function () {
    $('.qa-search-button-active').removeClass('qa-search-button-active').addClass('qa-search-button');
});

Upvotes: 0

Fidi
Fidi

Reputation: 5824

$('document').ready(function(){
    $('input[name="q"]').focus(function(event){
        $('input[type="submit"]).attr('class', 'qa-search-button-active');
    });


    $('input[name="q"]').focus(function(event){
        $('input[type="submit"]).attr('class', 'qa-search-button');
    });
});

Upvotes: 2

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

$(".qa-search-field").focusin(function() {
   $('.qa-search-button').addClass('.qa-search-button-active');
});

(".qa-search-field").focusout(function() {
   $('.qa-search-button').removeClass('.qa-search-button-active');
});

Upvotes: 2

Related Questions