Отправлять данные с помощью ajax при нажатии enter

У меня есть такая форма:

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

как я могу решить эту проблему?

Ответ 1

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

попробуйте это

Ответ 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>

Ответ 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();
    });
});

Ответ 4

Я думаю, что лучше сделать это при отправке формы. Браузеры делают для вас все "enter", поэтому вам не нужно беспокоиться об этом.

Добавьте 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

Ответ 5

Попробуйте использовать функцию keyup, поскольку функция "keypress" ведет себя по-разному в разных браузерах.