Adding enter in inputarea text dynamically

Question

I have one script where I want to add Return when shift+enter is pressed, it is working fine with single Enter, but it is not adding shift+Enter with \n due to error of javascript is not selecting exact content. I am getting following error

Uncaught TypeError: Cannot read property 'substring' of undefined
    at HTMLFormElement.<anonymous> (86:206)
    at HTMLFormElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLFormElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)

Here is my codes

$(document).ready(function(){
  $('.new_message').keyup(function (event) {
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
      var values = $(this).serializeArray();
      App.conversation.speak(values);
      $(this).trigger('reset');
  } else {
    if(event.keyCode === 13 && event.shiftKey){
      var content = $(this).serializeArray();
      var caret = getCaret($(this));
      this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
    }
  }
  });
});

I just want to add enter when user presses shift+enter and if he presses normal enter, it is working fine and sending text message. I am using rails with socket to send chat messages to user.

Answer 1

The issue was I am using .new_message form selector, although it is getting value but it is now allowing me to substring method. now I have changed by adding another id to message_box and change code to following.

$(document).ready(function(){
  $('.new_message').on('keyup', function(event) {
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
      var values = $(this).serializeArray();
      App.conversation.speak(values);
      $(this).trigger('reset');
  } else {
    if(event.keyCode === 13 && event.shiftKey){
      var content = $('#message_box').val()
      var caret = getCaret(this);
      $('#message_box').val( content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length) );
    }
  }
  });
});

It worked, but I noticed it was adding two Returns and it was on beginning, so now I removed second condition and it is working perfectly. Thank you for your support.