teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問submit後に入力した文字が表示されるようにしたい（Ajax）

編集履歴

質問編集履歴

11

編集

2018/06/25 02:42

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
File without changes

10

編集

2018/06/25 02:42

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
File without changes

9

誤字修正

2018/06/25 02:40

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
File without changes

8

誤字修正

2018/06/25 02:27

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
File without changes

7

誤字の修正

2018/06/25 01:48

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -27,7 +27,7 @@
27
27
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
28
28
  <script>
29
29
  $(function () {
30
- $("#save_comment").subimit(function(e) {
30
+ $('#save_comment').on("click",function(e) {
31
31
  e.preventDefault();
32
32
 
33
33
  // フォームの要素を取得
@@ -53,8 +53,8 @@
53
53
  ```
54
54
 
55
55
  ### 参考にしたuRL
56
- https://ginpen.com/2013/05/07/jquery-ajax-form/
56
+ [https://ginpen.com/2013/05/07/jquery-ajax-form/](https://ginpen.com/2013/05/07/jquery-ajax-form/)
57
- https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
57
+ [https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
58
58
 
59
59
  ### ゆくゆくは
60
60
  DBと連携し、入力された文字はDBで保存したいと考えていますが

6

参考URL追加

2018/06/18 03:54

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -52,6 +52,10 @@
52
52
  </script>
53
53
  ```
54
54
 
55
+ ### 参考にしたuRL
56
+ https://ginpen.com/2013/05/07/jquery-ajax-form/
57
+ https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
58
+
55
59
  ### ゆくゆくは
56
60
  DBと連携し、入力された文字はDBで保存したいと考えていますが
57
61
  まずは指定の位置に表示されることを確認したいと考えています。

5

誤字修正

2018/06/18 03:02

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -27,19 +27,26 @@
27
27
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
28
28
  <script>
29
29
  $(function () {
30
- $('#comment_form').submit(function(e) {
30
+ $("#save_comment").subimit(function(e) {
31
31
  e.preventDefault();
32
+
33
+ // フォームの要素を取得
34
+ var $form = $(this);
32
- var textValue = $("#textarea_apple").val();
35
+ var comment = $('#comment_form [save_comment]').val();
36
+
33
37
  $.ajax({
38
+ url: $form.attr('action'),
34
- type: "POST"
39
+ type: $form.attr('method'),
35
- data: {
40
+ data: $form.serialize(),
41
+
42
+ // 通信成功時
43
+ success: function(result, textStatus, xhr) {
36
- textValue: $("#textarea_apple").val(),
44
+ $("#comment_apple").text(comment);
37
45
  },
46
+ error: function(xhr, textStatus, error) {
38
- dataType: "json"
47
+ alert('NG');
48
+ }
39
- })
49
+ });
40
- .done(function(data)) {
41
- $("#comment_apple").html(textValue)
42
- })
43
50
  });
44
51
  });
45
52
  </script>

4

ハイライト修正

2018/06/18 02:55

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  表示をクリックしても表示されない
7
7
 
8
8
  ### ソースコード
9
- ```
9
+ ```html
10
10
  ~~~
11
11
  <div class="comment">
12
12
  <form id="comment_form" action="" method="post">
@@ -20,6 +20,9 @@
20
20
  <p>です</p>
21
21
 
22
22
  ~~~
23
+
24
+ ```
25
+ ```js
23
26
  // Ajax部分
24
27
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
25
28
  <script>

3

コードの変更

2018/06/15 09:21

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -26,8 +26,17 @@
26
26
  $(function () {
27
27
  $('#comment_form').submit(function(e) {
28
28
  e.preventDefault();
29
- var textValue = $('#textarea_apple').val();
29
+ var textValue = $("#textarea_apple").val();
30
+ $.ajax({
31
+ type: "POST"
32
+ data: {
33
+ textValue: $("#textarea_apple").val(),
34
+ },
35
+ dataType: "json"
36
+ })
37
+ .done(function(data)) {
30
- $("#comment_apple").html(textValue);
38
+ $("#comment_apple").html(textValue)
39
+ })
31
40
  });
32
41
  });
33
42
  </script>

2

誤字の修正

2018/06/15 09:16

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
  <div class="comment">
12
12
  <form id="comment_form" action="" method="post">
13
13
  <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
14
- <input type="submit" id="saveComment" value="表示">
14
+ <input type="submit" id="save_comment" value="表示">
15
15
  </form>
16
16
  </div>
17
17
  ~~~
@@ -24,7 +24,7 @@
24
24
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
25
25
  <script>
26
26
  $(function () {
27
- $('#saveComment').submit(function(e) {
27
+ $('#comment_form').submit(function(e) {
28
28
  e.preventDefault();
29
29
  var textValue = $('#textarea_apple').val();
30
30
  $("#comment_apple").html(textValue);

1

誤字の修正

2018/06/15 09:06

投稿

gomakichi
gomakichi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -10,13 +10,13 @@
10
10
  ~~~
11
11
  <div class="comment">
12
12
  <form id="comment_form" action="" method="post">
13
- <textarea id="textareaEC2" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
13
+ <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
14
14
  <input type="submit" id="saveComment" value="表示">
15
15
  </form>
16
16
  </div>
17
17
  ~~~
18
18
  <p>あなたのしたコメントは</p>
19
- <p id="commentEC2"></p>
19
+ <p id="comment_apple"></p>
20
20
  <p>です</p>
21
21
 
22
22
  ~~~
@@ -26,8 +26,8 @@
26
26
  $(function () {
27
27
  $('#saveComment').submit(function(e) {
28
28
  e.preventDefault();
29
- var textValue = $('#textareaEC2').val();
29
+ var textValue = $('#textarea_apple').val();
30
- $("#commentEC2").html(textValue);
30
+ $("#comment_apple").html(textValue);
31
31
  });
32
32
  });
33
33
  </script>