开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜