CODEWITHSUNDEEP
jqueryhtmlsubmit
Colin
Colin

Reputation: 113

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

Upvotes: 0

Views: 3455

Answers (1)

dtbarne
dtbarne

Reputation: 8210

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.

Upvotes: 2

Related Questions