jquery form submit and display results in div witout reload
Good day,
I found some of the code below on stackoverflow, but for the life of me I can't get this to work. I've played with the code a little bit, but I'm still learning javascript (slowly) and jquery.
What I'd like to do, is to have a search div with a search input, but instead of reloading the page, I'd like a div below the search to display the results, without a reload. Type in a search and click 'Search'. Here is my code, which does nothing, I might add:
My jquery version is 1.5.2 and is loaded with the include("javascript.php");
<?php
include("search_div.php");
include("javascript.php");
?>
<script type="text/javascript">
$("search").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(html) {
$("#results").html(html);
});
return false; // prevent normal submit
});
</script>
<div id="content">
<div id="searchdiv">
<form type="submit" onsubmit="return false;" name="search" id="search" method="post">
<table border="0" width="850" id="searchquery" cellpadding="0" cellspacing="0">
<tr><td align="center">Search Query: <input type="text" size="50" id="q" name="q"></td></tr>
</table>
<table border="0" width="850" id="searchquerybuttons" cellpadding="0" cellspacing="0">
<td align="right" width=840><input type="Submit" value="Search">
</table>
</form>
</div> <!-- end search div -->
<div id="results">
<?php
if (isset($_POST['q'])) {
echo "<br><br>Query is: ".$_POST['q'];
}
?>
</div> <!-- End results div -->
</div> <!-- End content div -->
<?php
include ("footer.php");
?开发者_开发百科>
</div> <!-- End of container div -->
Did you check the outputted HTML source?
Did you check the javascript error console to see what the errors were, if any?
What are the contents of javascript.php
? You can't include a javascript library with PHP. You should use something like:
<script type="text/javascript" src="scripts.js"></script>
Also, this:
$("search").submit(function() {
should be:
$("#search").submit(function() {
And you should remove the onsubmit attribute from the <form>
HTML.
精彩评论