https://www.idaten.ne.jp/portal/common/js/doubleSubmission.js

1/**
2 * @fileOverview
3 * 二重送信制御 JavaScript 部品です.
4 */
5
6var ot = ot || {};
7
8/**
9 * @namespace
10 * <p>二重送信制御 JavaScript 部品です.
11 * 送信ボタンのダブルクリックなどによる二重送信を禁止します。</p>
12 *
13 * <p>ot.doubleSubmission.start メソッドを呼び出すと制御を開始します。
14 * ただし、HTML 中の要素が作成された後に呼び出す必要があります。
15 * このため、通常は以下のように jQuery の ready または load イベント処理
16 * として登録します。</p>
17 *
18 * <pre>
19 * $(ot.doubleSubmission.start);
20 * または
21 * $(window).load(ot.doubleSubmission.start);
22 * </pre>
23 *
24 * <p>load イベント処理中に送信を行うような場合は、
25 * それより前に ot.doubleSubmission.start メソッドを
26 * 実行しておく必要があります。</p>
27 *
28 * <p>JavaScript で動的に form 要素を追加した場合は、
29 * ot.doubleSubmission.start メソッドを再度呼び出す必要があります。
30 * また、IE でアップロード用(enctype属性が"multipart/form-data")の
31 * フォーム配下に submit ボタンを動的に追加した場合も
32 * 同様に再度呼び出す必要があります。</p>
33 *
34 * <p>ot.doubleSubmission.setAllowed(true) と設定した場合は
35 * 二重送信を許可します。</p>
36 *
37 * <p>また、ot.doubleSubmission.setNextSubmissionAllowed(true)
38 * と設定した場合は次回の送信１回だけに限って、二重送信を許可します。</p>
39 */
40ot.doubleSubmission = {};
41
42/**
43 * 二重送信を許可するなら true、禁止するなら false
44 * (デフォルトは false).
45 *
46 * @private
47 */
48ot.doubleSubmission.allowed = false;
49
50/**

51 * 次回の送信を許可するなら true、禁止するなら false
52 * (デフォルトは false).
53 *
54 * @private
55 */
56ot.doubleSubmission.nextSubmissionAllowed = false;
57
58/**
59 * 送信中なら true、そうでなければ false
60 *
61 * @private
62 */
63ot.doubleSubmission.blocked = false;
64
65/**
66 * 未送信から送信中に変更した場合に呼び出す関数
67 *
68 * @private
69 */
70ot.doubleSubmission.blockFunction = null;
71
72/**
73 * 送信中から未送信に変更した場合に呼び出す関数
74 *
75 * @private
76 */
77ot.doubleSubmission.unblockFunction = null;
78
79/**
80 * 送信中に送信しようした場合
81 * (送信ボタンのダブルクリック等の場合)に呼び出す関数
82 *
83 * @private
84 */
85ot.doubleSubmission.doubleSubmissionErrorFunction = null;
86
87/**
88 * アップロードするファイル名が間違っていた場合
89 * (相対パスやスペース等の場合)に呼び出す関数
90 *
91 * @private
92 */
93ot.doubleSubmission.uploadErrorFunction = null;
94
95/**
96 * onsubmit イベントの fireEvent 実行中なら true、そうでなければ false
97 *
98 * @private
99 */
100ot.doubleSubmission.onsubmitEventFiring = false;
101
102/**
103 * 二重送信を許可するなら true、禁止するなら false
104 * (デフォルトは false) を返します.
105 *
106 * @return 二重送信を許可するなら true、
107 * 禁止するなら false
108 */
109ot.doubleSubmission.isAllowed = function () {
110    return ot.doubleSubmission.allowed;
111};
112
113/**
114 * 二重送信を許可するなら true、禁止するなら false
115 * (デフォルトは false) を設定します.
116 *
117 * @param value 二重送信を許可するなら true、
118 * 禁止するなら false
119 */
120ot.doubleSubmission.setAllowed = function (value) {
121    ot.doubleSubmission.allowed = value;
122};
123
124/**

125 * 次回の送信を許可するなら true、禁止するなら false
126 * (デフォルトは false) を返します.
127 *
128 * @return 次回の送信を許可するなら true、
129 * 禁止するなら false
130 */
131ot.doubleSubmission.isNextSubmissionAllowed = function () {
132    return ot.doubleSubmission.nextSubmissionAllowed;
133};
134
135/**
136 * <p>次回の送信を許可するなら true、禁止するなら false
137 * (デフォルトは false) を設定します.</p>
138 *
139 * <p>true に設定すると、次回の送信１回だけに限って、
140 * 二重送信であっても送信を許可し、その後この値は false に戻ります。
141 * また、その際に送信中かどうかの値(isBlockedが返す値)
142 * は変更しません。</p>
143 *
144 * @param value 次回の送信を許可するなら true、
145 * 禁止するなら false
146 */
147ot.doubleSubmission.setNextSubmissionAllowed = function (value) {
148    ot.doubleSubmission.nextSubmissionAllowed = value;
149};
150
151/**
152 * 送信中なら true、そうでなければ false
153 * を返します.
154 *
155 * @return 送信中なら true、そうでなければ false
156 */
157ot.doubleSubmission.isBlocked = function () {
158    return ot.doubleSubmission.blocked;
159};
160
161/**
162 * 送信中なら true、そうでなければ false
163 * を設定します.
164 *
165 * @param value 送信中なら true、そうでなければ false
166 */
167ot.doubleSubmission.setBlocked = function (value) {
168    if (ot.doubleSubmission.blocked === value) {
169    // 値の変更がない場合は何もしない
170        return;
171    }
172
173    ot.doubleSubmission.blocked = value;
174
175    if (ot.doubleSubmission.blocked) {
176        if (ot.doubleSubmission.blockFunction) {
177            ot.doubleSubmission.blockFunction();
178        }
179    } else {
180        if (ot.doubleSubmission.unblockFunction) {
181            ot.doubleSubmission.unblockFunction();
182        }
183    }
184};
185
186/**
187 * 未送信から送信中に変更した場合に呼び出す関数
188 * を返します.
189 *
190 * @return 未送信から送信中に変更した場合に呼び出す関数。
191 * null なら呼び出さない。初期値は null
192 */
193ot.doubleSubmission.getBlockFunction = function () {
194    return ot.doubleSubmission.blockFunction;
195};
196
197/**
198 * 未送信から送信中に変更した場合に呼び出す関数
199 * を設定します.
200 *
201 * @param value 未送信から送信中に変更した場合に呼び出す関数。
202 * null なら呼び出さない。初期値は null
203 */
204ot.doubleSubmission.setBlockFunction = function (value) {
205    ot.doubleSubmission.blockFunction = value;
206};
207
208/**
209 * 送信中から未送信に変更した場合に呼び出す関数
210 * を返します.
211 *
212 * @return 送信中から未送信に変更した場合に呼び出す関数。
213 * null なら呼び出さない。初期値は null
214 */
215ot.doubleSubmission.getUnblockFunction = function () {
216    return ot.doubleSubmission.unblockFunction;
217};
218
219/**
220 * 送信中から未送信に変更した場合に呼び出す関数
221 * を設定します.
222 *
223 * @param value 送信中から未送信に変更した場合に呼び出す関数。
224 * null なら呼び出さない。初期値は null
225 */
226ot.doubleSubmission.setUnblockFunction = function (value) {
227    ot.doubleSubmission.unblockFunction = value;
228};
229
230/**
231 * 送信中に送信しようした場合
232 * (送信ボタンのダブルクリック等の場合)に呼び出す関数
233 * を返します.
234 *
235 * @return 送信中に送信しようした場合
236 * (送信ボタンのダブルクリック等の場合)に呼び出す関数。
237 * null なら呼び出さない。初期値は null
238 */
239ot.doubleSubmission.getDoubleSubmissionErrorFunction = function () {
240    return ot.doubleSubmission.doubleSubmissionErrorFunction;
241};
242
243/**
244 * 送信中に送信しようした場合
245 * (送信ボタンのダブルクリック等の場合)に呼び出す関数
246 * を設定します.
247 *
248 * @param value 送信中に送信しようした場合
249 * (送信ボタンのダブルクリック等の場合)に呼び出す関数。
250 * null なら呼び出さない。初期値は null
251 */
252ot.doubleSubmission.setDoubleSubmissionErrorFunction = function (value) {
253    ot.doubleSubmission.doubleSubmissionErrorFunction = value;
254};
255
256/**
257 * アップロードするファイル名が間違っていた場合
258 * (相対パスやスペース等の場合)に呼び出す関数
259 * を返します.
260 *
261 * @return アップロードするファイル名が間違っていた場合
262 * (相対パスやスペース等の場合)に呼び出す関数。
263 * null なら呼び出さない。初期値は null
264 */
265ot.doubleSubmission.getUploadErrorFunction = function () {
266    return ot.doubleSubmission.uploadErrorFunction;
267};
268
269/**
270 * アップロードするファイル名が間違っていた場合
271 * (相対パスやスペース等の場合)に呼び出す関数
272 * を設定します.
273 *
274 * @param value アップロードするファイル名が間違っていた場合
275 * (相対パスやスペース等の場合)に呼び出す関数。
276 * null なら呼び出さない。初期値は null
277 */
278ot.doubleSubmission.setUploadErrorFunction = function (value) {
279    ot.doubleSubmission.uploadErrorFunction = value;
280};
281
282/**
283 * 二重送信禁止の制御を開始します.
284 * HTML 中の要素が作成された後に呼び出す必要があります。
285 */
286ot.doubleSubmission.start = function () {
287
288    for (var i = 0; i < document.forms.length; i++) {
289        var form = document.forms[i];
290
291        // フォームをカスタマイズ
292        ot.doubleSubmission.customizeForm(form);
293
294        // start DIS-NET4 非互換改修パターン:jQuery(4)
295        if (!$.support.noCloneEvent &&
296        // end DIS-NET4 非互換改修パターン:jQuery(4)
297                form.enctype === "multipart/form-data") {
298        // IEでアップロードを行うフォームの場合
299
300            // フォーム配下の全 submit ボタンをカスタマイズ
301            for (var j = 0; j < form.elements.length; j++) {
302                var control = form.elements[j];
303
304                if (control.tagName.toLowerCase() === 'input' &&
305                        control.type === 'submit') {
306                // submit ボタンの場合
307                    // submit ボタンをカスタマイズ
308                    ot.doubleSubmission.customizeSubmitButton(control);
309                }
310            }
311        }
312    }
313
314};
315
316/**
317 * <p>指定のフォームをカスタマイズします.</p>
318 *
319 * @private
320 * @param form フォーム
321 */
322ot.doubleSubmission.customizeForm = function (form) {
323    if (form.ot_doubleSubmission_customized) {
324    // すでにカスタマイズ済みなら何もしない
325        return;
326    }
327    form.ot_doubleSubmission_customized = true;
328
329    // onsubmit のカスタマイズ
330    if (form.onsubmit) {
331        form.ot_doubleSubmission_onsubmit_original = form.onsubmit;
332    }
333    /** @ignore */
334    form.onsubmit = function () {
335        return ot.doubleSubmission.handleOnsubmit(this);
336    };
337
338    // submit メソッドのカスタマイズ
339    form.ot_doubleSubmission_submit_original = form.submit;
340    /** @ignore */
341    form.submit = function () {
342        ot.doubleSubmission.handleSubmit(this);
343    };
344
345    // start DIS-NET4 非互換改修パターン:jQuery(4)
346    if (!$.support.noCloneEvent) {
347    // end DIS-NET4 非互換改修パターン:jQuery(4)
348    // IEの場合
349        // fireEvent メソッドのカスタマイズ
350        form.ot_doubleSubmission_fireEvent_original = form.fireEvent;
351        /** @ignore */
352        form.fireEvent = function (sEvent, oEvent) {
353            return ot.doubleSubmission.handleFireEvent(
354                    this, sEvent, oEvent);
355        };
356    }
357};
358
359/**
360 * <p>フォームの onsubmit のタイミングでの処理を行います.</p>
361 *
362 * @private
363 * @param form フォーム
364 * @return 送信を許可するなら true、禁止するなら false
365 */
366ot.doubleSubmission.handleOnsubmit = function (form) {
367    if (form.ot_doubleSubmission_onsubmit_original) {
368        try {
369            var ret = form.ot_doubleSubmission_onsubmit_original();
370            if (ret === false) {
371            // 本来の onsubmit で false を返した場合は送信しない
372                return false;
373            }
374        } catch (e) {
375        // onsubmit で例外発生しても以下の処理を行う
376        }
377    }
378
379    if (ot.doubleSubmission.onsubmitEventFiring) {
380    // onsubmit イベントの fireEvent 実行中なら送信中フラグは変更しない
381
382        // 送信を許可
383        return true;
384    }
385
386    if (ot.doubleSubmission.isAllowedForm(form)) {
387    // 二重送信を許可している場合
388
389        // 送信を許可
390        return true;
391
392    } else {
393    // 二重送信を禁止している場合
394
395        if (ot.doubleSubmission.isBlocked()) {
396        // 送信中の場合
397
398            // 二重送信エラー処理
399            ot.doubleSubmission.handleDoubleSubmissionError();
400
401            // 送信を禁止
402            return false;
403
404        } else {
405        // 未送信の場合
406
407            // 送信中に変更
408            ot.doubleSubmission.setBlocked(true);
409
410            // 送信を許可
411            return true;
412
413        }
414    }
415};
416
417/**
418 * <p>フォームの submit メソッドのタイミングでの処理を行います.</p>
419 *
420 * @private
421 * @param form フォーム
422 */
423ot.doubleSubmission.handleSubmit = function (form) {
424
425    if (ot.doubleSubmission.isAllowedForm(form)) {
426    // 二重送信を許可している場合
427
428        // 本来の submit メソッドを呼び出して送信
429        ot.doubleSubmission.invokeOriginalSubmit(form);
430
431    } else {
432    // 二重送信を禁止している場合
433
434        if (ot.doubleSubmission.isBlocked()) {
435        // 送信中の場合
436
437            // 二重送信エラー処理
438            ot.doubleSubmission.handleDoubleSubmissionError();
439
440        } else {
441        // 未送信の場合
442
443            // 送信中に変更
444            ot.doubleSubmission.setBlocked(true);
445
446            // 本来の submit メソッドを呼び出して送信
447            var succeeded = ot.doubleSubmission.invokeOriginalSubmit(
448                    form);
449            // 正常に送信できなかったら未送信に戻す
450            if (!succeeded) {
451                ot.doubleSubmission.setBlocked(false);
452            }
453
454        }
455    }
456};
457
458/**

459 * カスタマイズ前の本来の submit メソッドを呼び出します.
460 *
461 * @private
462 * @param form フォーム
463 * @return 正常に呼び出せたら true、例外発生したら false
464 */
465ot.doubleSubmission.invokeOriginalSubmit = function (form) {
466
467    try {
468        // 本来の submit メソッドを呼び出す。
469        form.ot_doubleSubmission_submit_original();
470        return true;
471    } catch (e) {
472        if (form.enctype === "multipart/form-data") {
473            // アップロードエラー処理
474            ot.doubleSubmission.handleUploadError();
475        }
476        return false;
477    }
478
479};
480
481/**
482 * 二重送信を許可しているかどうかを返します.
483 *
484 * @private
485 * @param form フォーム
486 * @return 二重送信を許可しているなら true、そうでなければ false
487 */
488ot.doubleSubmission.isAllowedForm = function (form) {
489    if (ot.doubleSubmission.nextSubmissionAllowed) {
490        ot.doubleSubmission.nextSubmissionAllowed = false;
491        return true;
492    }
493    return ot.doubleSubmission.allowed;
494};
495
496/**
497 * <p>フォームの fireEvent メソッドのタイミングでの処理を行います.</p>
498 *
499 * <p>IE で fireEvent メソッドを使用して
500 * onsubmit イベントが発生させられた場合、
501 * 送信は行われず、イベントだけが発生します。</p>
502 *
503 * <p>このため、onsubmit イベントの fireEvent メソッド実行中は、
504 * 送信中フラグを変更しないようにします。</p>
505 *
506 * <p>そうしないと、fireEvent() メソッドでイベント発生させた後に
507 * submit() メソッドで送信を行おうとした場合に
508 * 二重送信とみなされてしまいます。</p>
509 *
510 * @private
511 * @param form フォーム
512 * @param sEvent イベント名
513 * @param oEvent イベントオブジェクト
514 * @return fireEvent メソッドの戻り値
515 */
516ot.doubleSubmission.handleFireEvent = function (form, sEvent, oEvent) {
517    if (sEvent && sEvent.toLowerCase() === 'onsubmit') {
518    // onsubmit イベントの場合
519
520        var state = ot.doubleSubmission.onsubmitEventFiring;
521
522        // onsubmit イベントの fireEvent 実行中フラグを on
523        ot.doubleSubmission.onsubmitEventFiring = true;
524
525        // 本来の fireEvent メソッドを呼び出す
526        var result = form.ot_doubleSubmission_fireEvent_original(
527                sEvent, oEvent);
528
529        // onsubmit イベントの fireEvent 実行中フラグを元に戻す
530        ot.doubleSubmission.onsubmitEventFiring = state;
531
532        return result;
533
534    } else {
535    // それ以外のイベントの場合
536
537        // 本来の fireEvent メソッドを呼び出す
538        return form.ot_doubleSubmission_fireEvent_original(
539                sEvent, oEvent);
540
541    }
542};
543
544/**
545 * <p>指定の submit ボタンをカスタマイズします.</p>
546 *
547 * <p>IE でアップロードを行うフォーム用の処理です。</p>
548 *
549 * @private
550 * @param submitButton submit ボタン
551 */
552ot.doubleSubmission.customizeSubmitButton = function (submitButton) {
553    if (submitButton.ot_doubleSubmission_customized) {
554    // すでにカスタマイズ済みなら何もしない
555        return;
556    }
557    submitButton.ot_doubleSubmission_customized = true;
558
559    if (submitButton.onclick) {
560        submitButton.ot_doubleSubmission_onclick_original =
561                submitButton.onclick;
562    }
563    /** @ignore */
564    submitButton.onclick = function () {
565        ot.doubleSubmission.handleOnclickOfSubmitButton(this);
566        return false;
567    };
568};

569
570/**
571 * <p>submit ボタンの onclick のタイミングでの処理を行います.</p>
572 *
573 * <p>IE でアップロードを行うフォーム用の処理です。</p>
574 *
575 * <p>IEでは
576 * アップロードするファイルのパスが相対パスなどの場合に、
577 * 送信時にエラーとなって送信されません。</p>
578 *
579 * <p>この場合には送信中フラグを false に戻さないと
580 * 再送信できなくなるので、
581 * 送信中フラグを false に戻すようにしています。</p>
582 *
583 * <p>けれど、単に submit ボタンのクリックで送信した場合には
584 * エラー発生を把握できません。
585 * このため、submit ボタンの click イベント処理で
586 * 同じ name, value 属性の非表示の submit ボタンを作成し、
587 * その submit ボタンの click メソッドを呼び出して、
588 * 例外を catch します。</p>
589 *
590 * @private
591 * @param submitButton submit ボタン
592 */
593ot.doubleSubmission.handleOnclickOfSubmitButton = function (submitButton) {
594
595    if (submitButton.ot_doubleSubmission_onclick_original) {
596        try {
597            var ret = submitButton.ot_doubleSubmission_onclick_original();
598            if (ret === false) {
599            // 本来の onclick で false を返した場合は送信しない
600                return;
601            }
602        } catch (e) {
603        // onclick で例外発生しても以下の処理を行う
604        }
605    }
606
607    // 指定submitボタンと同じname,valueの非表示submitボタンを作成
608    var hiddenSubmit = document.createElement("input");
609    hiddenSubmit.type = "submit";
610    hiddenSubmit.name = submitButton.name;
611    hiddenSubmit.value = submitButton.value;
612    hiddenSubmit.style.display = 'none';
613
614    // 非表示submitボタンをフォームの子に追加
615    submitButton.form.appendChild(hiddenSubmit);
616
617    // 送信中フラグの現在の状態を取得
618    var state = ot.doubleSubmission.isBlocked();
619
620    var failed = false;
621    try {
622        // 非表示submitボタンをクリック
623        hiddenSubmit.click();
624    } catch (e2) {
625        failed = true;
626    }
627
628    // 非表示submitボタンをフォームの子から削除
629    submitButton.form.removeChild(hiddenSubmit);
630
631    if (failed) {
632    // 非表示submitボタンのクリックで例外が発生した場合
633
634        // 送信中フラグを元の状態に戻す
635        ot.doubleSubmission.setBlocked(state);
636
637        // アップロードエラー処理
638        ot.doubleSubmission.handleUploadError();
639    }
640
641};
642
643/**
644 * 二重送信エラー処理を行います.
645 *
646 * @private
647 */
648ot.doubleSubmission.handleDoubleSubmissionError = function () {
649
650    if (ot.doubleSubmission.doubleSubmissionErrorFunction) {
651    // 関数登録されていれば呼び出す
652        ot.doubleSubmission.doubleSubmissionErrorFunction();
653    }
654
655};
656
657/**
658 * アップロードエラー処理を行います.
659 *
660 * @private
661 */
662ot.doubleSubmission.handleUploadError = function () {
663
664    if (ot.doubleSubmission.uploadErrorFunction) {
665    // 関数登録されていれば呼び出す
666        ot.doubleSubmission.uploadErrorFunction();
667    }
668
669};