Sending ajax form reloads page instead of sending request

Question

I'm struggling to create a shoutbox for django. Everything works fine now concerning reading data from the database, but when I want to add a new shout the whole page is being reloaded, and from what I was able to check - form's action remains the same, and there is no request sent to function under specified url. What am I doing wrong here ?

HTML :

<div id="shoutbox">    
    <form method="post" id="form" class="shoutbox-form">
        <table>
            <tr>
                <td><label>User</label></td>
                <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td>
            </tr>
            <tr>
                <td><label>Message</label></td>
                <td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input id="send-shout" type="submit" value="Dodaj!" /></td>
            </tr>
        </table>
    </form>
    <div id="shoutbox-container">
        <span class="clear"></span>
        <div class="shoutbox">
            <div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div>
            <ul>
            </ul>
        </div>
    </div>
</div>

jQuery :

$(document).ready(function(){
    var inputUser = $("#nick");
    var inputMessage = $("#shout");
    var loading = $("#shoutbox-loading");
    var messageList = $(".shoutbox > ul");

    function updateShoutbox(){
        messageList.hide();
        loading.fadeIn();
        $.ajax({
            type: "POST", 
            url: "/shouts/", 
            data: "action=refresh",
            dataType: "json",
            success: function(data){
                loading.fadeOut();
                var c = data["response"];
                messageList.html(c);
                messageList.fadeIn(2000);
            }
        });
    }
    function checkForm(){
        if(inputUser.attr("value") && inputMessage.attr("value"))
            return true;
        else
            return false;
    }

    updateShoutbox();


    $("#shoutbox-form").submit(function(){
        if(checkForm()){
            var nick = inputUser.attr("value");
            var message = inputMessage.attr("value");
            $("#send-shout").attr({ disabled:true, value:"Sending..." });
            $("#send-shout").blur();
            $.ajax({
                type: "POST", 
                async: true,
                url: "/shouts/", 
                data: "action=insert&user=" + nick + "&message=" + message,
                //data: {"action" : "insert", "user": user, "message": message},
                dataType: "json",
                complete: function(data){
                    var c = data["response"];
                    messageList.html(c);
                    updateShoutbox();
                    $("#send-shout").attr({ disabled:false, value:"Shout!" });
                }
             });
        }
        else alert("All fields needed!");
        return false;
    });    
});

My url :

url(r'^shouts/?$', "shoutbox"),

And function :

def shoutbox(request, user=None, message=None):
    response = ""
    if not request.POST.get("action"):
        return HttpResponseRedirect('/')
    else:
        req = request.POST.get("action")
        if req == "insert":
            response = shoutbox_add(message, user)
        elif req == "refresh":
            response = shoutbox_get(20)

    if request.is_ajax():
        result = simplejson.dumps({
            'response': response
        }, cls=LazyEncoder)
        return HttpResponse(result, mimetype='application/javascript') 

Answer 1

Your form has id 'form' and class 'shoutbox-form', so your selector should be

$("#form").submit(function(){

or

$(".shoutbox-form").submit(function(){