send data with ajax when pressing enter

Question

i have a form like this :

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

i want to send data when user pressing enter or clicking on button

it's work when user click on button , but it doesn't work when user pressing enter on chat_in

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

how can i solve this problem ?

It [works for me](http://jsfiddle.net/pYP4s/); you must have something else going on beyond what you've posted — CrayonViolent, Jun 14 '14 at 22:38
@Crayon Violent it's not sending data when user pressing enter — user3325376, Jun 14 '14 at 22:42
@user3325376 well then perhaps you should have been more specific than "it doesn't work" — CrayonViolent, Jun 14 '14 at 22:43
@RyanJ both of them ( `e.keyCode ` and `e.which ` ) detecting enter key , but my problem is , data doesn't sent in this case... — user3325376, Jun 14 '14 at 22:50
But FYI i see a post request to save.php w/ `msg=[value]` in it. So I stick by my "something else going on here besides what you posted." @RyanJ [jquery normalizes `.which` vs. `.keyCode`](http://stackoverflow.com/questions/4471582/javascript-keycode-vs-which) so that shouldn't be an issue — CrayonViolent, Jun 14 '14 at 22:51

score 1 · Answer 1 · answered Jun 15 '14 at 05:33

1

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

try this

answered Jun 15 '14 at 05:33

shadee

160
3
11

score 1 · Answer 2 · answered Jun 15 '14 at 10:34

if anyone have same problem , just remove form and use button

in this case your html and javascript should be something like this :

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

score 0 · Answer 3 · answered Jun 15 '14 at 05:25

Move out SendData from 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();
    });
});

Simcha Khabinsky · Answer 4 · 2014-06-15T05:43:20.383

0

I think it may be better to do this on the submit of the form. Browsers do the whole "enter" thing for you so you don't have to worry about it.

Add id to the <form> tag, and change the type from button to 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>

Update you Javascript:

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

Here is the JSFiddle

edited Jun 15 '14 at 05:43

answered Jun 15 '14 at 05:36

Simcha Khabinsky

1,970
2
19
34

it's not working and returning error ajax `error:function( {alert("failure");}` – user3325376 Jun 15 '14 at 10:08

score 0 · Answer 5 · answered Jun 15 '14 at 14:42

0

Please try to use keyup function as "keypress" function behaves differently in different browsers.

answered Jun 15 '14 at 14:42

javadg

92
1
8

send data with ajax when pressing enter

5 Answers5

Linked