submit後に入力した文字が表示されるようにしたい（Ajax）

Question

実現したいこと

テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる

できていないこと

表示をクリックしても表示されない

ソースコード

~~~
<div class="comment">
    <form id="comment_form" action="" method="post">
        <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
        <input type="submit" id="save_comment" value="表示">
    </form>
</div>
~~~
<p>あなたのしたコメントは</p>
<p id="comment_apple"></p>
<p>です</p>

~~~

// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
  $('#save_comment').on("click",function(e) {
    e.preventDefault();

    // フォームの要素を取得
    var $form = $(this);
    var comment = $('#comment_form [save_comment]').val();

    $.ajax({
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: $form.serialize(),

      // 通信成功時
      success: function(result, textStatus, xhr) {
        $("#comment_apple").text(comment);
      },
      error: function(xhr, textStatus, error) {
        alert('NG');
      }
    });
  });
});
</script>

参考にしたuRL

https://ginpen.com/2013/05/07/jquery-ajax-form/
https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e

ゆくゆくは

DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。

Comments

[m.ts10806]

えっと勘違いして回答してしまったので回答のために確認です。AjaxではなくJavaScriptでは？

[gomakichi]

すみません。こちらの手違いで間違ったコードをあげていました。 今回、保存ボタンが押された際に非同期通信で表示をしたいと考えています。 そのためAJaxと記載しました。 修正いたしました。

[m.ts10806]

了解です。紛らわしいのを避けるためにhtmlとjsはコードブロックをわけたほうがいいかもしれませんね。 ```js ```html　のように冒頭の```に続いて言語名をつけると言語に則したハイライトがされるようになるので、そちらも調整してみてください。

[x_x]

再現しません。何かエラーは出ていないでしょうか？

[m.ts10806]

x_xさん 私の方ではpreventDefault()がきかずsubmitが実行されることにより「クリックしても表示されない」が再現したのですが、jQueryのバージョンなど関係するのでしょうか。（3系最新使いました） あ、1の方がいいのか。ちょっと確認します。

[gomakichi]

返信遅くなりすみません...。JavaScriptを編集いたしました。エラーは特に出ておらず、保存ボタンをクリックしてもコメントフォームの内容が特に何も変化しない状態となっております。

[m.ts10806]

「subimit」というイベントはありませんが、私の回答は参考にされたのでしょうか。要件を満たしていない部分がありましたら教えていただきたく。

[gomakichi]

失礼いたしました。修正が追いついておらず申し訳ございません。submitから、コメント保存ボタンクリック時の処理に変更しましたが、以前と変わらずテキストエリアの本文は表示されない状態が続いております。

[m.ts10806]

迷走しまくってますけど、　$('#comment_form').val();　ですよ。　　#comment_form [save_comment]　って何を指しているんでしょう？改悪が続いているように思います。

[gomakichi]

すみません。一旦考え直します。

[x_x]

$("#textarea_apple").val()ですよね？　最初はこう書いてあったと思うのですが……

Answer 1

submitでは「submitされた」イベントを取得するので
preventDefault()では止まらないのでは、と思います。
（止める前にもう送信してしまっている）

下記のようにclick時のイベントにするとpreventDefault()がききます。

$('#saveComment').on("click",function(e) {