CODEWITHSUNDEEP
javascriptjquerytogglebutton
gek
gek

Reputation: 125

jQuery toggle search button

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?

Upvotes: 1

Views: 2636

Answers (6)

Abhishek B.
Abhishek B.

Reputation: 5202

Please refer below URL for toggle Div.

Check below Working Demos

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

Thanks

Upvotes: 0

Deadlykipper
Deadlykipper

Reputation: 878

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

Upvotes: 0

gdoron
gdoron

Reputation: 150253

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

Upvotes: 1

antonjs
antonjs

Reputation: 14318

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

Upvotes: 0

dumP
dumP

Reputation: 801

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

Upvotes: 0

mgraph
mgraph

Reputation: 15338

include jquery:

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

then:

function flipSearchButton()

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

Upvotes: 0

Related Questions