jQuery切换搜索按钮

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

Answer 2

include jquery:

<script type="text/javascript" src="jquery.js"></script>

then:

function flipSearchButton()

{
   $('#search_clickable').hide();
   $('#search_unclickable').show();
}

Answer 3

i thought something like this:

$("#search_clickable").click(function() {
  $("#search_clickable").hide();
  $("#search_unclickable").show();
});

if you wanna toggle this element, use toggle() instead of hide() and show().

Answer 4

You can also consider to use fade effect to improve user experience

function flipSearchButton() 
{
  $('#search_unclickable').fadeIn('slow', function() {
    // Animation complete
  });
  $('#search_clickable').fadeOut('slow', function() {
    // Animation complete
  });
};

Answer 5

You don't even need a separate function:

$("input[type=submit").click(function() {
   $("#search_clickable").hide();
   $("#search_unclickable").show();
});

Or use the id/class of the submit button if you want to on a specific button:

$(".search").click(function() {
   $("#search_clickable").hide();
   $("#search_unclickable").show();
});

Answer 6

Please refer below URL for toggle Div.

Check below Working Demos

As per your question : Demo1
As per my opinion : Demo2

Thanks