jQuery showing div and then Disappearing

Question

I apologize ahead of time if this is a simple question, I have this javascript code:

$(document).ready(function() {
    $("#results").hide();

    var html = $.ajax({ url: "ajax.php?db_list=get", async: false}).responseText;

    $("#submit").click(function () { 
        $("#results").show(); 
    });
});

I have a button that looks this:

<fieldset class="action">
        <button name="submit" id="submit">Submit</button>
</fieldset>

When I click on the Submit button I wanted to show the results div and have it stay there, but in Chrome it pops up and then immediately disappears, is this because of the hide() function at the top of my document ready?

Thanks!

Answer 1

...is this because of the hide() function at the top of my document ready?

Probably. I'm guessing the page is refreshing. If you don't want that, use return false; in the handler.

$("#submit").click(function () { 
    $("#results").show();
    return false; 
});

or event.preventDefault().

$("#submit").click(function ( event ) { 
    $("#results").show();
    event.preventDefault();
});