Question

I use old javascript code to flip my search button from search to searching in my forms as follows

<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div> 

My javascript function is

function flipSearchButton()

{
   document.getElementById('search_clickable').style.display = 'none';
   document.getElementById('search_unclickable').style.display = 'block';
}

How to I achieve this with jQuery?

Answer 1

function flipSearchButton(){
    $('#search_clickable').hide(); // or - $('#search_clickable').toggle();
    $('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}

And stop using inline javascript:

$('.search').click(flipSearchButton);

Note that your search button is of type submit (?!) so it will submit the form, You probably want to change the type to button or return false from the callback:

function flipSearchButton(){
    $('#search_clickable').hide();
    $('#search_unclickable').show();
    return false;
}