Wrap your code inside $(document).ready(function(){});
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>
Solution
OTHER TIPS
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>
$('#search_form').on('focus', '#searched', function(e){
$('#advanced').slideDown();
})
Solution is to wrap your javascript code inside this:
$(document).ready(function(){
// your code
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow