Submit ajax form on enter press in textbox

Question

I have a textbox that is my message textbox. At the moment, my ajax form works by the click of a button. Im guessing because the button's name.

I want it so that when I press enter in my textbox, it submits the form but without refreshing the page.

Adding some jquery on enter makes my page refresh.

Below is the code to my refreshing page current state. My working state with a button is included with this form instead:

    <form class="chat-form form -dark" method="POST" onsubmit="return submitchat();">
        <input class="form-control" type="text" name="chat" id="chatbox" placeholder="Type something.." />
        <input type='submit' name='send' id='send' class='btn btn-send' value='Send' />
    </form>

My php script is :

    <form class="chat-form form -dark" method="POST" onsubmit="return submitchat();">
        <input class="form-control entryMsg" type="text" name="chat" id="chatbox" placeholder="Type something.." />
    </form>

My Javascript / Jquery is :`

<script>
    // Javascript function to submit new chat entered by user
    function submitchat(){
            if($('#chat').val()=='' || $('#chatbox').val()==' ') return false;
            $.ajax({
                url:'chat/chat.php',
                data:{chat:$('#chatbox').val(),ajaxsend:true},
                method:'post',
                success:function(data){
                    $('#result').html(data); // Get the chat records and add it to result div
                    $('#chatbox').val(''); //Clear chat box after successful submition
                    document.getElementById('result').scrollTop=document.getElementById('result').scrollHeight; // Bring the scrollbar to bottom of the chat resultbox in case of long chatbox
                }
            })
            return false;
    };

    // Function to continously check the some has submitted any new chat
    setInterval(function(){
        $.ajax({
                url:'chat/chat.php',
                data:{ajaxget:true},
                method:'post',
                success:function(data){
                    $('#result').html(data);
                }
        })
    },1000);

    // Function to chat history
    $(document).ready(function(){
        $('#clear').click(function(){
            if(!confirm('Are you sure you want to clear chat?'))
                return false;
            $.ajax({
                url:'chat/chat.php',
                data:{username:"<?php echo $_SESSION['username'] ?>",ajaxclear:true},
                method:'post',
                success:function(data){
                    $('#result').html(data);
                }
            })
        })
    })
</script>
<script>
    $(document).ready(function() {
        $('.entryMsg').keydown(function(event) {
            if (event.keyCode == 13) {
                this.form.submit();
                return false;
             }
        });
    });
</script>`

Answer 1

Add a keydown function to run the function.

$("#txtSearchProdAssign").keydown(function (e) {
  
  if (e.keyCode == 13) {
   console.log("put function call here");
   e.preventDefault();
   submitchat();
  }
  
});

function submitchat(){
  console.log("SUBMITCHAT function");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form type="post">
<input type="text" id="txtSearchProdAssign">
</form>

Answer 2

change the function to this

    function submitchat(e){
    e.preventDefault();
// rest  code
}