Trying to submit form on textbox enter press with jquery ajax doesn't work

Question

I'm trying to submit a form using jquery and ajax, but it fails. Here's the code:

$(document).ready(function ()
{
    $('.crazytext').keydown(function (event)
    {
        if (event.keyCode == 13)
        {
            $.ajax(
            {
                url: '/sendchat.php',
                type: 'POST',
                data:
                {
                    'from': $('#from').val(),
                    'to': $('#to').val(),
                    'when': $('#when').val(),
                    'msg': $('#chatty').val()
                }
            });
        }
    });
});

It's simple, I want to submit the form once enter is pressed and send data to sendchat.php without reloading the page. This is the html:

<form id="send-message-area" method="POST" action="sendchat.php">
  <input type="text" name="from" id="from" value="<?php echo $me;?>" hidden>
  <input type="text" name="to" id="to" value="<?php echo $other1;?>" hidden>
  <input type="text" name="when" id="when" value="<?php echo $date;?>" hidden> 
  <textarea class="crazytext" name="msg" id="chatty"></textarea>
  <input type="submit" name="chat" values="chat" class="crazytext2" hidden>
</form>

And if necessary, the php code for sendchat.php

$fromuser = $_POST['from'];
$touser = $_POST['to'];
$when = $_POST['when'];
$msg = $_POST['msg'];
$seen = 0;
$addchat = $db->prepare("INSERT INTO scorp_chats (Fromuser, Touser, Messagetime, Message, Seen) VALUES (:fromuser, :touser, :messagetime, :message, :seen)");
$addchat->execute(array(':fromuser' => $fromuser, ':touser' => $touser, ':messagetime' => $when, ':message' => $msg, ':seen' => $seen));

That's it really, it's super simple but it fails. If I remove the ajax part completely, it works, but I get redirected to the page, which shouldn't happen.

SOLUTION (Thanks to Barmar):

$(document).ready(function () {
    $('.crazytext').keydown(function (event) { // your input(textarea) class
        if (event.keyCode == 13) {
            event.preventDefault();
            $.ajax({
                url: 'sendchat.php', // script to process data
                type: 'POST',
                data: $("#send-message-area").serialize(), // form ID
                success: function(result) {
                    $("#result").text(result);
                }
            });
        }
    });
});

Answer 1

You need to prevent the default submission action:

$('.crazytext').keydown(function (event)
{
    if (event.keyCode == 13)
    {
        event.preventDefault(); // <----
        $.ajax(
        {
            url: '/sendchat.php',
            type: 'POST',
            data:
            {
                'from': $('#from').val(),
                'to': $('#to').val(),
                'when': $('#when').val(),
                'msg': $('#chatty').val()
            }
        });
    }
});

DEMO