JQuery SlideDown on KeyPress

Question

I have a form with advanced options. The advanced options are in a div (hidden). When the "Search" input box is keyed I'd like to un-hide the div using slidedown. Here's the code (partially taken from another source: jQuery slideDown with forms):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://api.jquery.com/resources/events.js"></script> <script type="text/javascript"> $("#searched").keypress(function(event) { if ( event.which == 13 ) { event.preventDefault(); } $("#advanced").slideDown(); }); </script> </head> <body> <div id="content"> <form action="mycontrolleraddress" method="post" accept-charset="utf-8" name="search_form" id="search_form"> <input type="text" name="query" value="" placeholder="Search..." id="searched"/><br/> <div id="advanced" style="display: none;"> From: <input type="text" name="date_from" value="" id="datepicker" onchange="validateDate();" class="datefield" /><br/> To: <input type="text" name="date_to" value="" id="datepicker2" onchange="validateDate();" class="datefield" /> <br/> </div> <input type="submit" name="submit" value="Submit" /> </div> </body> </html>

user2308046 · Accepted Answer · 2013-04-22 18:32:08Z

1

Wrap your code inside $(document).ready(function(){});

answered Apr 22, 2013 at 18:32

user2308046

Sign up to request clarification or add additional context in comments.

Comments

Tamil Selvan C · Accepted Answer · 2013-04-22 18:33:25Z

use inside $(function() {}); or $(document).ready(function() {});

<script type="text/javascript"> $(function() { $("#searched").keypress(function(event) { if ( event.which == 13 ) { event.preventDefault(); } $("#advanced").slideDown(); }); }); </script>

maximkou · Accepted Answer · 2013-04-22 18:33:39Z

0

$('#search_form').on('focus', '#searched', function(e){ $('#advanced').slideDown(); })

answered Apr 22, 2013 at 18:33

maximkou

5,3421 gold badge23 silver badges41 bronze badges

Comments

user2304984 · Accepted Answer · 2013-04-22 18:34:15Z

Solution is to wrap your javascript code inside this:

$(document).ready(function(){ // your code });

Collectives™ on Stack Overflow

JQuery SlideDown on KeyPress

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related