追記

html
1                    <form method="POST" action="{{ $article->id }}" accept-charset="UTF-8" onclick="return confirm(Are you sure you want to erase?);">
2                        <input type="hidden" name="_method" value="DELETE">
3                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
4                        <ul>
5                            <li>
6                                <button class="button big icon fa-trash" onclick="return confirm('Are you sure you want to delete it?')">
7                                    Delete this article
8                                </button>
9                            </li>
10                        </ul>
11                    </form>

一応、Laravel 5.4使っています。

javascript
1$('form :submit').click(function (event) {
2  var TIMEOUT = 10000;
3  var target  = event.target;
4  var $form   = $(target).closest('form');
5  var $submit = $form.find(':submit');
6
7  // clickしたsubmitの値をhiddenに保存
8  var $hidden = $('<input/>', {
9    type: 'hidden',
10    name: target.name,
11    value: target.value
12  }).appendTo($form);
13
14  event.preventDefault();
15  event.stopPropagation();
16
17  // 全てのsubmitを無効化
18  $submit.prop('disabled', true);
19
20  // 時間経過でsubmitの無効化を解除
21  setTimeout(function () {
22    $hidden.remove();
23    $submit.prop('disabled', false);
24  }, TIMEOUT);
25
26  $form.submit();
27});

onclick="return confirm('Are you sure you want to delete it?')"

onclickでキャンセルできなくなりました。
どうすればキャンセルが効くようになるでしょうか？

s8_chu

2017/02/20 09:02

HTMLの追記をしていただけませんか？

spellbound

2017/02/20 09:03

かしこまりました。

行動規範の内容に同意します

回答1件

ベストアンサー

このようにしてはいかがでしょうか？
buttonタグにかかっていたonclick属性を削除して、jQuery部分にconfirm関数での分岐を記述しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<form method="POST" action="{{ $article->id }}" accept-charset="UTF-8"
15      onclick="return confirm('Are you sure you want to erase?');">
16    <input type="hidden" name="_method" value="DELETE">
17    <input type="hidden" name="_token" value="{{ csrf_token() }}">
18    <ul>
19        <li>
20            <button class="button big icon fa-trash">
21                Delete this article
22            </button>
23        </li>
24    </ul>
25</form>
26<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
27<script>
28    $('form :submit').click(function (event) {
29        if (confirm('Are you sure you want to delete it?')) {
30            var TIMEOUT = 10000;
31            var target = event.target;
32            var $form = $(target).closest('form');
33            var $submit = $form.find(':submit');
34
35            // clickしたsubmitの値をhiddenに保存
36            var $hidden = $('<input/>', {
37                type: 'hidden',
38                name: target.name,
39                value: target.value
40            }).appendTo($form);
41
42            event.preventDefault();
43            event.stopPropagation();
44
45            // 全てのsubmitを無効化
46            $submit.prop('disabled', true);
47
48            // 時間経過でsubmitの無効化を解除
49            setTimeout(function () {
50                $hidden.remove();
51                $submit.prop('disabled', false);
52            }, TIMEOUT);
53
54            $form.submit();
55        } else {
56            return false;
57        }
58    });
59</script>
60</body>
61</html>