質問編集履歴

3

追記編集

2016/03/07 09:41

投稿

masarusan24
masarusan24

スコア55

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,20 @@
32
32
 
33
33
 
34
34
 
35
+ ##追記(3/7)
36
+
37
+ せっかくなので、勉強がてら未経験のajaxでの実装を試みています。
38
+
39
+ 下記に追記した関数でボタンのクリックイベントを捕まえるところまではうまくいきました。
40
+
41
+
42
+
43
+ ですが、これだとリストが複数行あった場合に最終行のボタンにしか反応してくれません。
44
+
45
+ 関数を行数分生成するというのもなんか違う気がしますし、うまい方法がありましたらお知恵をいただけるとありがたいです。
46
+
47
+
48
+
35
49
  ###ソースコード
36
50
 
37
51
 
@@ -158,11 +172,9 @@
158
172
 
159
173
  <td>
160
174
 
175
+ <!-- formのidを行数に応じて命名(subform1,subform2...)-->
176
+
161
- <!--<form name="Form_<? $data['col01']?>" id="Form_<? $data['col01']?>" method="post" action="./update.php">-->
177
+ <form name="subform<? $data['rownum']?>" id="subform<? $data['rownum']?>" method="post" action="./update.php">
162
-
163
- <!-- いったんformのidを固定にして試す -->
164
-
165
- <form name="the-form" id="the-form" method="post" action="./update.php">
166
178
 
167
179
  <input type="text" maxlength=1 id="<? $data['col01']?>" value="<? $data['col02']?>">
168
180
 
@@ -170,7 +182,7 @@
170
182
 
171
183
  <td>
172
184
 
173
- <input type="button" value="フラグ更新" onClick="fnc_update(document.getElementById('<? $data['col01']?>').value);" >
185
+ <input type="button" value="フラグ更新" >
174
186
 
175
187
  </td>
176
188
 
@@ -194,130 +206,84 @@
194
206
 
195
207
  <!--
196
208
 
209
+ $("#button<? $data['rownum']?>").click(function() {
210
+
211
+
212
+
213
+ // 操作対象のフォーム要素を取得
214
+
197
- function fnc_update(n){
215
+ var $form = $(this);
216
+
217
+
218
+
198
-
219
+ // 送信ボタンを取得
220
+
221
+ // (後で使う: 二重送信を防止する。)
222
+
199
- if(n == "1" || n == "0"){
223
+ var $button = $form.find('button');
224
+
225
+
226
+
200
-
227
+ // 送信
228
+
229
+ $.ajax({
230
+
201
- if(confirm('更新してよろしいですか?')){
231
+ url: $form.attr('action'),
202
-
232
+
203
- alert("更新したかも");
233
+ type: 'POST',
204
-
205
- return true;
234
+
206
-
207
- }else {
208
-
209
- return false;
235
+ data: $form.serialize(),
236
+
210
-
237
+ timeout: 10000, // 単位はミリ秒
238
+
239
+
240
+
241
+ // 送信前
242
+
243
+ beforeSend: function(xhr, settings) {
244
+
245
+ // ボタンを無効化し、二重送信を防止
246
+
247
+ $button.attr('disabled', true);
248
+
211
- }
249
+ },
212
-
250
+
213
- return true;
251
+ // 応答後
214
-
215
- }else {
252
+
216
-
217
- alert("0か1を入力してね");
253
+ complete: function(xhr, textStatus) {
254
+
218
-
255
+ // ボタンを有効化し、再送信を許可
256
+
219
- return false;
257
+ $button.attr('disabled', false);
220
-
258
+
221
- }
259
+ },
222
-
260
+
261
+
262
+
223
- }
263
+ // 通信成功時の処理
264
+
224
-
265
+ success: function(result, textStatus, xhr) {
266
+
225
- // -->
267
+ // テキスト表示
268
+
269
+ $('#result').text('OK');
270
+
271
+ },
272
+
273
+
274
+
275
+ // 通信失敗時の処理
276
+
277
+ error: function(xhr, textStatus, error) {}
278
+
279
+ });
280
+
281
+ });
282
+
283
+ });
284
+
285
+ -->
226
286
 
227
287
  </script>
228
288
 
229
289
  ```
230
-
231
-
232
-
233
- ##追記
234
-
235
- せっかくなので、勉強がてら未経験のajaxでの実装を試みています。
236
-
237
- とりあえずformのidを"the-form"と固定にして、下記関数でクリックイベントを捕まえられるか、デバッガを見ながら追っていますがなかなかうまくいきません。
238
-
239
- 実装内容に問題ありましたらご指摘いただけますでしょうか。
240
-
241
- ※上記のHTMLも少し修正しました。
242
-
243
-
244
-
245
- ```javascript
246
-
247
- $("#the-form").click(function(event) {
248
-
249
- // HTMLでの送信をキャンセル
250
-
251
- event.preventDefault();
252
-
253
-
254
-
255
- // 操作対象のフォーム要素を取得
256
-
257
- var $form = $(this);
258
-
259
-
260
-
261
- // 送信ボタンを取得
262
-
263
- // (後で使う: 二重送信を防止する。)
264
-
265
- var $button = $form.find('button');
266
-
267
-
268
-
269
- // 送信
270
-
271
- $.ajax({
272
-
273
- url: $form.attr('action'),
274
-
275
- type: 'POST',
276
-
277
- data: $form.serialize(),
278
-
279
- timeout: 10000, // 単位はミリ秒
280
-
281
-
282
-
283
- // 送信前
284
-
285
- beforeSend: function(xhr, settings) {
286
-
287
- // ボタンを無効化し、二重送信を防止
288
-
289
- $button.attr('disabled', true);
290
-
291
- },
292
-
293
- // 応答後
294
-
295
- complete: function(xhr, textStatus) {
296
-
297
- // ボタンを有効化し、再送信を許可
298
-
299
- $button.attr('disabled', false);
300
-
301
- },
302
-
303
-
304
-
305
- // 通信成功時の処理
306
-
307
- success: function(result, textStatus, xhr) {
308
-
309
- $('#result').text('OK');
310
-
311
- },
312
-
313
-
314
-
315
- // 通信失敗時の処理
316
-
317
- error: function(xhr, textStatus, error) {}
318
-
319
- });
320
-
321
- });
322
-
323
- ```

2

javascript追記

2016/03/07 09:41

投稿

masarusan24
masarusan24

スコア55

test CHANGED
File without changes
test CHANGED
@@ -158,12 +158,14 @@
158
158
 
159
159
  <td>
160
160
 
161
- <form name="Form_<? $data['col01']?>" id="Form_<? $data['col01']?>" method="post" action="./update.php">
161
+ <!--<form name="Form_<? $data['col01']?>" id="Form_<? $data['col01']?>" method="post" action="./update.php">-->
162
+
163
+ <!-- いったんformのidを固定にして試す -->
164
+
165
+ <form name="the-form" id="the-form" method="post" action="./update.php">
162
166
 
163
167
  <input type="text" maxlength=1 id="<? $data['col01']?>" value="<? $data['col02']?>">
164
168
 
165
- </form>
166
-
167
169
  </td>
168
170
 
169
171
  <td>
@@ -172,6 +174,8 @@
172
174
 
173
175
  </td>
174
176
 
177
+ </form>
178
+
175
179
  <!-- 問題の箇所ここまで -->
176
180
 
177
181
  <? } else { ?>
@@ -180,6 +184,10 @@
180
184
 
181
185
  <? } ?>
182
186
 
187
+ </table>
188
+
189
+ <div id="result"></div>
190
+
183
191
 
184
192
 
185
193
  <script type="text/javascript">
@@ -219,3 +227,97 @@
219
227
  </script>
220
228
 
221
229
  ```
230
+
231
+
232
+
233
+ ##追記
234
+
235
+ せっかくなので、勉強がてら未経験のajaxでの実装を試みています。
236
+
237
+ とりあえずformのidを"the-form"と固定にして、下記関数でクリックイベントを捕まえられるか、デバッガを見ながら追っていますがなかなかうまくいきません。
238
+
239
+ 実装内容に問題ありましたらご指摘いただけますでしょうか。
240
+
241
+ ※上記のHTMLも少し修正しました。
242
+
243
+
244
+
245
+ ```javascript
246
+
247
+ $("#the-form").click(function(event) {
248
+
249
+ // HTMLでの送信をキャンセル
250
+
251
+ event.preventDefault();
252
+
253
+
254
+
255
+ // 操作対象のフォーム要素を取得
256
+
257
+ var $form = $(this);
258
+
259
+
260
+
261
+ // 送信ボタンを取得
262
+
263
+ // (後で使う: 二重送信を防止する。)
264
+
265
+ var $button = $form.find('button');
266
+
267
+
268
+
269
+ // 送信
270
+
271
+ $.ajax({
272
+
273
+ url: $form.attr('action'),
274
+
275
+ type: 'POST',
276
+
277
+ data: $form.serialize(),
278
+
279
+ timeout: 10000, // 単位はミリ秒
280
+
281
+
282
+
283
+ // 送信前
284
+
285
+ beforeSend: function(xhr, settings) {
286
+
287
+ // ボタンを無効化し、二重送信を防止
288
+
289
+ $button.attr('disabled', true);
290
+
291
+ },
292
+
293
+ // 応答後
294
+
295
+ complete: function(xhr, textStatus) {
296
+
297
+ // ボタンを有効化し、再送信を許可
298
+
299
+ $button.attr('disabled', false);
300
+
301
+ },
302
+
303
+
304
+
305
+ // 通信成功時の処理
306
+
307
+ success: function(result, textStatus, xhr) {
308
+
309
+ $('#result').text('OK');
310
+
311
+ },
312
+
313
+
314
+
315
+ // 通信失敗時の処理
316
+
317
+ error: function(xhr, textStatus, error) {}
318
+
319
+ });
320
+
321
+ });
322
+
323
+ ```

1

先頭行削除

2016/03/04 09:08

投稿

masarusan24
masarusan24

スコア55

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,3 @@
1
- PHPで動的に生成されたテキストボックスの値をPOSTしたい
2
-
3
1
  ###前提・実現したいこと
4
2
 
5
3
  【前提】