回答編集履歴

5

jQuery取得になっていたのを、変数を用意した方に合わせて修正

2020/06/29 04:15

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -150,7 +150,7 @@
150
150
 
151
151
  // 送信は最後にしないと、上記が実行されずに送信が発生する。(formの送信は、ページ遷移と同等と考えた方がいい)
152
152
 
153
- $('form').submit();
153
+ formElm.submit();
154
154
 
155
155
  });
156
156
 
@@ -172,7 +172,7 @@
172
172
 
173
173
 
174
174
 
175
- $('form').submit();
175
+ formElm.submit();
176
176
 
177
177
  });
178
178
 

4

name属性付きだけだと語弊があるので修正

2020/06/29 04:15

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -78,7 +78,7 @@
78
78
 
79
79
  # 追記に対して
80
80
 
81
- `form`要素は、`form`内に置いている、**全ての`name`属性**を送信します。
81
+ `form`要素は、`form`内に置いている、**全ての`name`属性付き`input`要素の内容**を送信します。
82
82
 
83
83
  つまり、二つのボタンに、`name`属性がついている場合、片方を押したとしても、
84
84
 

3

追記の方のform要素のonsubmitが抜けていたので修正

2020/06/29 03:35

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
  <!-- というか、submit用のボタンにnameをつけることはほとんどありません。(送信する情報として使うことがほぼない) -->
96
96
 
97
- <form method="POST" enctype="multipart/form-data">
97
+ <form method="POST" enctype="multipart/form-data" onsubmit="return false;">
98
98
 
99
99
  <!-- 中略 -->
100
100
 

2

追記に対し、修正を追記

2020/06/29 01:21

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -73,3 +73,111 @@
73
73
  (`action`属性を省略した場合は、自身に再遷移します。→ まぁ、見た目的にはリロードと挙動は一緒)
74
74
 
75
75
  なので、それを考慮した処理をする必要があります。
76
+
77
+
78
+
79
+ # 追記に対して
80
+
81
+ `form`要素は、`form`内に置いている、**全ての`name`属性**を送信します。
82
+
83
+ つまり、二つのボタンに、`name`属性がついている場合、片方を押したとしても、
84
+
85
+ もう片方にも`name`属性がついている場合、両方の情報が送信されます。
86
+
87
+ (この仕様はしっかりと覚えてください。)
88
+
89
+ よって、HTML、JavaScriptを下記のように修正するといいでしょう。
90
+
91
+
92
+
93
+ ```html
94
+
95
+ <!-- というか、submit用のボタンにnameをつけることはほとんどありません。(送信する情報として使うことがほぼない) -->
96
+
97
+ <form method="POST" enctype="multipart/form-data">
98
+
99
+ <!-- 中略 -->
100
+
101
+ <button class="btn-save_and_edit" type="submit">一時保存して編集を継続</button>
102
+
103
+ <!-- 中略 -->
104
+
105
+ </form>
106
+
107
+ ```
108
+
109
+
110
+
111
+ ```javascript
112
+
113
+ $(function() {
114
+
115
+
116
+
117
+ const formElm = $('form');
118
+
119
+ // formに、見えないけど情報を持つinput[type="hidden"]を追加する。
120
+
121
+ const inputData = document.createElement('input');
122
+
123
+ inputData.type = 'hidden';
124
+
125
+ inputData.value = 'nameType';
126
+
127
+
128
+
129
+ formElm[0].appendChild(inputData);
130
+
131
+
132
+
133
+ $('.btn-save').click(function(e) {
134
+
135
+ e.preventDefault();
136
+
137
+
138
+
139
+ $('.btn-save').hide();
140
+
141
+ $('.btn-save_loading').show();
142
+
143
+
144
+
145
+ // inputのnameを変更。サーバー処理対象外にするために。
146
+
147
+ inputData.name = 'notEdit';
148
+
149
+
150
+
151
+ // 送信は最後にしないと、上記が実行されずに送信が発生する。(formの送信は、ページ遷移と同等と考えた方がいい)
152
+
153
+ $('form').submit();
154
+
155
+ });
156
+
157
+
158
+
159
+ $('.btn-save_and_edit').click(function(e) {
160
+
161
+ e.preventDefault();
162
+
163
+
164
+
165
+ // なんやかんやの処理をする。
166
+
167
+
168
+
169
+ // inputのnameを、サーバー側で判断させるために、name値を対象にする値に変更
170
+
171
+ inputData.name = 'save_and_edit';
172
+
173
+
174
+
175
+ $('form').submit();
176
+
177
+ });
178
+
179
+
180
+
181
+ });
182
+
183
+ ```

1

コードとコメントの間の改行を整理

2020/06/29 01:20

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -34,9 +34,9 @@
34
34
 
35
35
  $('.btn-save_loading').show();
36
36
 
37
+
38
+
37
39
  // 送信は最後にしないと、上記が実行されずに送信が発生する。(formの送信は、ページ遷移と同等と考えた方がいい)
38
-
39
-
40
40
 
41
41
  $('form').submit();
42
42
 
@@ -70,6 +70,6 @@
70
70
 
71
71
  `form`の送信は、基本的には、**ページ遷移が行われます**。
72
72
 
73
- (`action`属性を省略した場合は、自身に再遷移します。→ まぁリロードと見た目の挙動は一緒)
73
+ (`action`属性を省略した場合は、自身に再遷移します。→ まぁ、見た目的にはリロードと挙動は一緒)
74
74
 
75
75
  なので、それを考慮した処理をする必要があります。