サブミットボタンを押した時の処理

#実現したいこと
submitを押した時に送信できるようにしたい。

前提
actioncableを使ったリアルタイム掲示板を作っています。

コード

coffeescript
1# 入力時の処理
2$(document).on 'keypress', '#content', (event) ->
3  if event.shiftKey
4    if event.which is 13
5      room_id = window.location.href.match(/rooms/(.+$)/)[1]
6      # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。
7      content = $.trim($("#content").val())
8      $('#content').val('')
9      has_content = if content.length > 0 then true else false
10
11      picture = $('#picture')
12      has_picture = if picture.get(0).files.length > 0 then true else false
13
14      if has_content or has_picture
15        if has_picture
16         ...
17        else
18            ...
19
20      event.preventDefault()
21    return false;

slim
1 form id="test_form" class="border"
2   .form-control.border-bottom.border-top-0.border-right-0.border-left-0
3     input type="file" id="picture" class="col-6"
4     input type="submit" id="chat" class="col-2 offset-4"
5   textarea id="content" class="form-control border-0"

#困っていること
submitボタンを押してもactioncableでテキストエリアの中身を送信してくれない
下記で#chatを追記してみたが送信できなかったです。
$(document).on 'keypress', '#content #chat', (event) ->

追記

coffee
1# 入力時の処理
2$(document).on 'keypress', '#content', (event) ->
3  # エンターキーを押した時に処理
4  if event.shiftKey
5    if event.which is 13
6      room_id = window.location.href.match(/rooms/(.+$)/)[1]
7      # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。
8      content = $.trim($("#content").val())
9      $('#content').val('')
10      has_content = if content.length > 0 then true else false
11
12      picture = $('#picture')
13      has_picture = if picture.get(0).files.length > 0 then true else false
14
15      if has_content or has_picture
16        if has_picture
17          file_name = picture.get(0).files[0].name
18          # ファイル読み込み用のreader生成
19          reader = new FileReader()
20          # Data URI Scheme文字列を取得するためのファイル読み込み
21          reader.readAsDataURL picture.get(0).files[0]
22          # readerが画像を読み込んだ後の処理
23          reader.addEventListener "loadend", ->
24            # reader.result部分が、読み込んだ画像のData URI Scheme文字列
25            App.room.speak room_id, content, reader.result, file_name
26        else
27            App.room.speak room_id, content
28
29      # 後続のイベントキャンセル
30      # これが無いとエンターを押したあとに画面が一番上まで
31      # スクロールしたりします。
32      event.preventDefault()
33    return false;
34  else if event.$('#chat')
35      room_id = window.location.href.match(/rooms/(.+$)/)[1]
36      # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。
37      content = $.trim($("#content").val())
38      $('#content').val('')
39      has_content = if content.length > 0 then true else false
40
41      picture = $('#picture')
42      has_picture = if picture.get(0).files.length > 0 then true else false
43
44      if has_content or has_picture
45        if has_picture
46          file_name = picture.get(0).files[0].name
47          # ファイル読み込み用のreader生成
48          reader = new FileReader()
49          # Data URI Scheme文字列を取得するためのファイル読み込み
50          reader.readAsDataURL picture.get(0).files[0]
51          # readerが画像を読み込んだ後の処理
52          reader.addEventListener "loadend", ->
53            # reader.result部分が、読み込んだ画像のData URI Scheme文字列
54            App.room.speak room_id, content, reader.result, file_name
55        else
56            App.room.speak room_id, content
57
58      # 後続のイベントキャンセル
59      # これが無いとエンターを押したあとに画面が一番上まで
60      # スクロールしたりします。
61      event.preventDefault()

行動規範の内容に同意します

回答2件

自己解決

coffee
1# 入力時の処理
2$(document).on 'keypress', '#content', (event) ->
3  # エンターキーを押した時に処理
4  if event.shiftKey
5    if event.which is 13
6      room_id = window.location.href.match(/rooms/(.+$)/)[1]
7      content = $.trim($("#content").val())
8      $('#content').val('')
9      has_content = if content.length > 0 then true else false
10
11      picture = $('#picture')
12      has_picture = if picture.get(0).files.length > 0 then true else false
13
14      if has_content or has_picture
15        if has_picture
16         ...
17        else
18            ...
19    return false;
20
21  $('#chat').click ->
22      room_id = window.location.href.match(/rooms/(.+$)/)[1]
23      content = $.trim($("#content").val())
24      $('#content').val('')
25      has_content = if content.length > 0 then true else false
26
27      picture = $('#picture')
28      has_picture = if picture.get(0).files.length > 0 then true else false
29
30      if has_content or has_picture
31        if has_picture
32          file_name = picture.get(0).files[0].name
33          ...
34        else
35            ...
36
37      event.preventDefault()
38