Call function on 'Enter' press

Question

Here is my HTML code:

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
        <span class="input-group-btn">
            <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
        </span>
    </div>
</div>

And here is my jQuery code:

$('.message').keypress(function (e) {
    if (e.which == 13) {
        var msg = $(this).val();
        var id = $(this).closest('span').next('button.btn_chat').val();
        alert(id+"      "+msg);
        sendMessage(msg,id);
    }
    e.preventDefault();
});

Here is my send message function:

var sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

Now I want to call my sendMessge function in it, when enter button press after message written.

But when I press enter button my jQuery not run. How can I solve this problem?

Answer 1

Angular provides mechanism, You can create a form and use ngSubmit to bind function to execute when form is submitted.

So, when Enter is pressed form will be submitted.

HTML

<div class="panel-footer">
    <div class="input-group">
        <form ng-submit="sendMessage(messageToSend, 79)">
            <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" /> 
          <span class="input-group-btn">
                <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
          </span>
        </form>
     </div>
</div>

Add method in your controller

$scope.sendMessage = function(messageToSend,id) {
    // $log.debug(messageToSend);
    id = parseInt(id);
    if(messageToSend.length != 0){
        $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
            $log.debug(response.data);
            $('input.message').val("");
        });
    }
};

---

If you don't want to use form, then you can use ngKeyup

<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" >