Question

我有一个这样的表格：

<form method="post">
    <input type="text" name="msg" id="chat_in" >
    <input type="button" name="bt" id="bt">
</form>

我想在用户按下回车或点击按钮

时发送数据当用户点击按钮时，它的工作正常，但当用户按下chat_in上的输入

时，它无法正常工作

这是我的javascript：

$(document).ready(function () {
    function SendData() {
        $.ajax({
            url: "save.php",
            type: "post",
            data: "msg="+$('#chat_in').val(),
            dataType: 'json', 
            success: function(){   
                alert("Sent");
            },
            error:function(){
                alert("failure");                
            }
        });
    }

    $('#chat_in').keypress(function(e) {
        if(e.which == 13) {
            alert('You pressed enter!');
            SendData();
        }
    });

    $('#bt').click(function() {
        SendData();
    });
});

我该如何解决这个问题？

Answer 1

$("#chat_in").keyup(function(event){
if(event.keyCode == 13){
   //call send data function here
    SendData();
} });

试试这个

Answer 2

如果有人遇到同样的问题，请删除form并使用button

在这种情况下你的html和javascript应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>final</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function() {
function SendData() {
   $.ajax({
        url: "save.php",
        type: "post",
        data: "msg="+$('#chat_in').val(),
        dataType: 'json', 
        success: function(){   
            alert("Sent");
        },


        error:function(){
            alert("failure");

        }
    });


}   



$('#chat_in').keypress(function(e) {
    if(e.keyCode == 13) {
        alert('You pressed enter!');
        SendData();
    }



    });


$('#bt').click(function() {
SendData();


 });





});

</script>
</head>

<body>
<input type="text" name="msg" id="chat_in" >
<input type="button" name="bt" id="bt">
</body>
</html>

Answer 3

从SendData

移出document.ready

function SendData() {
        $.ajax({
            url: "save.php",
            type: "post",
            data: "msg="+$('#chat_in').val(),
            dataType: 'json', 
            success: function(){   
                alert("Sent");
            },
            error:function(){
                alert("failure");                
            }
        });
    }

$(document).ready(function () {

    $('#chat_in').keypress(function(e) {
        if(e.which == 13) {
            alert('You pressed enter!');
            SendData();
        }
    });

    $('#bt').click(function() {
        SendData();
    });
});

Answer 4

我认为在提交表单时这样做可能会更好。浏览器会为您完成整个“输入”操作，因此您不必担心它。

将id添加到<form>代码，并将类型从button更改为submit：

<form method="post" id="myForm">
    <input type="text" name="msg" id="chat_in" >
    <input type="submit" name="bt" id="bt" value="Click Me">
</form>

更新Javascript：

$('#myForm').submit(function() {
        SendData();
});

以下是JSFiddle

Answer 5

请尝试使用keyup功能，因为“keypress”功能在不同的浏览器中表现不同。

按Enter键时用ajax发送数据

5 个答案: