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

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

• javascript
• php

• stackoverflow./a/155263/4229270 – Sinto Commented Jul 7, 2017 at 7:42

4 Answers 4

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./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form type="post">
<input type="text" id="txtSearchProdAssign">
</form>

change the function to this

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

from below code you can call ajax function after user press enter button

$('#msg').keypress(function(e){

        if(e.keyCode == 13){
            var keyword   = this.value;
            console.log(keyword);
            if(keyword.length>0){

                $.ajax({
                    url: 'aj_support_chat.php',
                    method: 'POST',
                    data: {holder: 'chat_start',type: 'in',keyword: keyword,}, 
                    success: function(res){ 
                        console.log(res)
                        return false;
                    }       
                });
            }
        }
});

you can also check entered text has some value or not

As you are declaring the method in the ajax call, you can remove the method="post" on the form. Having the POST method on the form will force it to try and submit the form which - in this case - will act as a refresh.

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