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

編集履歴

質問編集履歴

11

編集

2018/06/25 02:42

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
File without changes

10

編集

2018/06/25 02:42

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
File without changes

9

誤字修正

2018/06/25 02:40

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
File without changes

8

誤字修正

2018/06/25 02:27

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
File without changes

7

誤字の修正

2018/06/25 01:48

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  $(function () {
58
58
 
59
- $("#save_comment").subimit(function(e) {
59
+ $('#save_comment').on("click",function(e) {
60
60
 
61
61
  e.preventDefault();
62
62
 
@@ -108,9 +108,9 @@
108
108
 
109
109
  ### 参考にしたuRL
110
110
 
111
- https://ginpen.com/2013/05/07/jquery-ajax-form/
111
+ [https://ginpen.com/2013/05/07/jquery-ajax-form/](https://ginpen.com/2013/05/07/jquery-ajax-form/)
112
112
 
113
- https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
113
+ [https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e](https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e)
114
114
 
115
115
 
116
116
 

6

参考URL追加

2018/06/18 03:54

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -106,6 +106,14 @@
106
106
 
107
107
 
108
108
 
109
+ ### 参考にしたuRL
110
+
111
+ https://ginpen.com/2013/05/07/jquery-ajax-form/
112
+
113
+ https://qiita.com/yugokitajima/items/b2fb29f5bc9af8a6bf8e
114
+
115
+
116
+
109
117
  ### ゆくゆくは
110
118
 
111
119
  DBと連携し、入力された文字はDBで保存したいと考えていますが

5

誤字修正

2018/06/18 03:02

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -56,31 +56,45 @@
56
56
 
57
57
  $(function () {
58
58
 
59
- $('#comment_form').submit(function(e) {
59
+ $("#save_comment").subimit(function(e) {
60
60
 
61
61
  e.preventDefault();
62
62
 
63
+
64
+
65
+ // フォームの要素を取得
66
+
67
+ var $form = $(this);
68
+
63
- var textValue = $("#textarea_apple").val();
69
+ var comment = $('#comment_form [save_comment]').val();
70
+
71
+
64
72
 
65
73
  $.ajax({
66
74
 
67
- type: "POST"
75
+ url: $form.attr('action'),
68
76
 
69
- data: {
77
+ type: $form.attr('method'),
70
78
 
79
+ data: $form.serialize(),
80
+
81
+
82
+
83
+ // 通信成功時
84
+
85
+ success: function(result, textStatus, xhr) {
86
+
71
- textValue: $("#textarea_apple").val(),
87
+ $("#comment_apple").text(comment);
72
88
 
73
89
  },
74
90
 
75
- dataType: "json"
91
+ error: function(xhr, textStatus, error) {
76
92
 
77
- })
93
+ alert('NG');
78
94
 
79
- .done(function(data)) {
95
+ }
80
96
 
81
- $("#comment_apple").html(textValue)
82
-
83
- })
97
+ });
84
98
 
85
99
  });
86
100
 

4

ハイライト修正

2018/06/18 02:55

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ### ソースコード
16
16
 
17
- ```
17
+ ```html
18
18
 
19
19
  ~~~
20
20
 
@@ -41,6 +41,12 @@
41
41
 
42
42
 
43
43
  ~~~
44
+
45
+
46
+
47
+ ```
48
+
49
+ ```js
44
50
 
45
51
  // Ajax部分
46
52
 

3

コードの変更

2018/06/15 09:21

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -54,9 +54,27 @@
54
54
 
55
55
  e.preventDefault();
56
56
 
57
- var textValue = $('#textarea_apple').val();
57
+ var textValue = $("#textarea_apple").val();
58
58
 
59
+ $.ajax({
60
+
61
+ type: "POST"
62
+
63
+ data: {
64
+
65
+ textValue: $("#textarea_apple").val(),
66
+
67
+ },
68
+
69
+ dataType: "json"
70
+
71
+ })
72
+
73
+ .done(function(data)) {
74
+
59
- $("#comment_apple").html(textValue);
75
+ $("#comment_apple").html(textValue)
76
+
77
+ })
60
78
 
61
79
  });
62
80
 

2

誤字の修正

2018/06/15 09:16

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
26
26
 
27
- <input type="submit" id="saveComment" value="表示">
27
+ <input type="submit" id="save_comment" value="表示">
28
28
 
29
29
  </form>
30
30
 
@@ -50,7 +50,7 @@
50
50
 
51
51
  $(function () {
52
52
 
53
- $('#saveComment').submit(function(e) {
53
+ $('#comment_form').submit(function(e) {
54
54
 
55
55
  e.preventDefault();
56
56
 

1

誤字の修正

2018/06/15 09:06

投稿

gomakichi
gomakichi

スコア17

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <form id="comment_form" action="" method="post">
24
24
 
25
- <textarea id="textareaEC2" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
25
+ <textarea id="textarea_apple" style="width: 80%;" placeholder="コメントをどうぞ"></textarea>
26
26
 
27
27
  <input type="submit" id="saveComment" value="表示">
28
28
 
@@ -34,7 +34,7 @@
34
34
 
35
35
  <p>あなたのしたコメントは</p>
36
36
 
37
- <p id="commentEC2"></p>
37
+ <p id="comment_apple"></p>
38
38
 
39
39
  <p>です</p>
40
40
 
@@ -54,9 +54,9 @@
54
54
 
55
55
  e.preventDefault();
56
56
 
57
- var textValue = $('#textareaEC2').val();
57
+ var textValue = $('#textarea_apple').val();
58
58
 
59
- $("#commentEC2").html(textValue);
59
+ $("#comment_apple").html(textValue);
60
60
 
61
61
  });
62
62