質問編集履歴

11 編集

gomakichi

gomakichi score 15

2018/06/25 11:42  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// 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://ginpen.com/2013/05/07/jquery-ajax-form/)
[https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

10 編集

gomakichi

gomakichi score 15

2018/06/25 11:40  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// 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://ginpen.com/2013/05/07/jquery-ajax-form/)
[https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

9 誤字修正

gomakichi

gomakichi score 15

2018/06/25 11:27  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// 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://ginpen.com/2013/05/07/jquery-ajax-form/)
[https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

8 誤字修正

gomakichi

gomakichi score 15

2018/06/25 10:48  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// 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://ginpen.com/2013/05/07/jquery-ajax-form/)
[https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

7 誤字の修正

gomakichi

gomakichi score 15

2018/06/18 12:54  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
 $("#save_comment").subimit(function(e) {
 $('#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
[https://ginpen.com/2013/05/07/jquery-ajax-form/](https://ginpen.com/2013/05/07/jquery-ajax-form/)
[https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

6 参考URL追加

gomakichi

gomakichi score 15

2018/06/18 12:02  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
 $("#save_comment").subimit(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で保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

5 誤字修正

gomakichi

gomakichi score 15

2018/06/18 11:55  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```html
~~~
<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>
~~~
```
```js
// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
 $('#comment_form').submit(function(e) {
 $("#save_comment").subimit(function(e) {
   e.preventDefault();
   var textValue = $("#textarea_apple").val();
   // フォームの要素を取得
   var $form = $(this);
   var comment = $('#comment_form [save_comment]').val();
   $.ajax({
     type: "POST"
     data: {
       textValue: $("#textarea_apple").val(),
     url: $form.attr('action'),
     type: $form.attr('method'),
     data: $form.serialize(),
     // 通信成功時
     success: function(result, textStatus, xhr) {
       $("#comment_apple").text(comment);
     },
     dataType: "json"
   })
   .done(function(data)) {
     $("#comment_apple").html(textValue)
   })
     error: function(xhr, textStatus, error) {
       alert('NG');
     }
   });
 });
});
</script>
```
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

4 ハイライト修正

gomakichi

gomakichi score 15

2018/06/15 18:21  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```
```html
~~~
<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>
~~~
 
```  
```js  
// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
 $('#comment_form').submit(function(e) {
   e.preventDefault();
   var textValue = $("#textarea_apple").val();
   $.ajax({
     type: "POST"
     data: {
       textValue: $("#textarea_apple").val(),
     },
     dataType: "json"
   })
   .done(function(data)) {
     $("#comment_apple").html(textValue)
   })
 });
});
</script>
```
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

3 コードの変更

gomakichi

gomakichi score 15

2018/06/15 18:16  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```
~~~
<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 () {
 $('#comment_form').submit(function(e) {
   e.preventDefault();
   var textValue = $('#textarea_apple').val();
   $("#comment_apple").html(textValue);
   var textValue = $("#textarea_apple").val();
   $.ajax({
     type: "POST"
     data: {
       textValue: $("#textarea_apple").val(),
     },
     dataType: "json"
   })
   .done(function(data)) {
     $("#comment_apple").html(textValue)
   })
 });
});
</script>
```
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2 誤字の修正

gomakichi

gomakichi score 15

2018/06/15 18:06  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```
~~~
<div class="comment">
   <form id="comment_form" action="" method="post">
       <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
       <input type="submit" id="saveComment" value="表示">
       <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 () {
 $('#saveComment').submit(function(e) {
 $('#comment_form').submit(function(e) {
   e.preventDefault();
   var textValue = $('#textarea_apple').val();
   $("#comment_apple").html(textValue);
 });
});
</script>
```
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 誤字の修正

gomakichi

gomakichi score 15

2018/06/15 18:00  投稿

submit後に入力した文字が表示されるようにしたい(Ajax)
### 実現したいこと
テキストエリアに文字を入力し、「表示」をクリックしたら指定の位置に表示される
テキストエリアの文字もそのまま残ったままになる
### できていないこと
表示をクリックしても表示されない
### ソースコード
```
~~~
<div class="comment">
   <form id="comment_form" action="" method="post">
       <textarea id="textareaEC2" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
       <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
       <input type="submit" id="saveComment" value="表示">
   </form>
</div>
~~~
<p>あなたのしたコメントは</p>
<p id="commentEC2"></p>
<p id="comment_apple"></p>
<p>です</p>
~~~
// Ajax部分
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
 $('#saveComment').submit(function(e) {
   e.preventDefault();
   var textValue = $('#textareaEC2').val();
   $("#commentEC2").html(textValue);
   var textValue = $('#textarea_apple').val();
   $("#comment_apple").html(textValue);
 });
});
</script>
```
### ゆくゆくは
DBと連携し、入力された文字はDBで保存したいと考えていますが
まずは指定の位置に表示されることを確認したいと考えています。
  • HTML

    15786 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ajax

    1663 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る