在文本框中按下回车键时提交ajax表单

Question

我有一个文本框，它是我的消息文本框。 目前，我的ajax表单是通过按钮的点击工作的。 我猜这是因为按钮的名称。

我希望当我在文本框中按下回车键时，它会提交表单，但不会刷新页面。

添加一些jQuery代码后，按Enter键会使我的页面刷新。

以下是我的刷新页面当前状态的代码。 这个带有按钮的工作状态包含在这个表单中：

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

我的PHP脚本是：

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

我的Javascript / Jquery代码是：

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

- Benza

---

https://dev59.com/-XVC5IYBdhLWcg3w4VX6#155263 - Sinto

Answer 1

添加一个 keydown 函数来运行该函数。

$("#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>

- Icewine

---

是的，但是这甚至不允许我在文本框中输入任何内容。 - Benza

更新完成。 - Icewine

Answer 2

将函数更改为以下内容。

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

- Exprator

---

什么也没做。 - Benza

Answer 3

由于您在ajax调用中声明了方法，因此可以删除表单上的method="post"。在表单上使用POST方法将强制它尝试提交表单，这在本例中将充当刷新。

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

- Damon Josko

Answer 4

从下面的代码中，您可以在用户按下回车键后调用ajax函数

$('#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;
                    }       
                });
            }
        }
});

你还可以检查输入的文本是否有值

- Pritamkumar