実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
できていないこと
表示をクリックしても表示されない
ソースコード
html
1~~~ 2<div class="comment"> 3 <form id="comment_form" action="" method="post"> 4 <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea> 5 <input type="submit" id="save_comment" value="表示"> 6 </form> 7</div> 8~~~ 9<p>あなたのしたコメントは</p> 10<p id="comment_apple"></p> 11<p>です</p> 12 13~~~ 14
js
1// Ajax部分 2<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 3<script> 4$(function () { 5 $('#save_comment').on("click",function(e) { 6 e.preventDefault(); 7 8 // フォームの要素を取得 9 var $form = $(this); 10 var comment = $('#comment_form [save_comment]').val(); 11 12 $.ajax({ 13 url: $form.attr('action'), 14 type: $form.attr('method'), 15 data: $form.serialize(), 16 17 // 通信成功時 18 success: function(result, textStatus, xhr) { 19 $("#comment_apple").text(comment); 20 }, 21 error: function(xhr, textStatus, error) { 22 alert('NG'); 23 } 24 }); 25 }); 26}); 27</script>
参考にしたuRL
https://ginpen.com/2013/05/07/jquery-ajax-form/
https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。