回答編集履歴

1 修正、追記

s8_chu

s8_chu score 13432

2017/02/20 18:23  投稿

このようにしてはいかがでしょうか?
buttonタグにかかっていたonclick属性を削除して、jQuery部分に[confirm関数](http://www.tagindex.com/javascript/window/confirm.html)での分岐を記述しました。  
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>タイトル</title>
   <style type="text/css">
       * {
           margin: 0;
           padding: 0;
       }
   </style>
</head>
<body>
<form method="POST" action="{{ $article->id }}" accept-charset="UTF-8"
     onclick="return confirm('Are you sure you want to erase?');">
   <input type="hidden" name="_method" value="DELETE">
   <input type="hidden" name="_token" value="{{ csrf_token() }}">
   <ul>
       <li>
           <button class="button big icon fa-trash">
               Delete this article
           </button>
       </li>
   </ul>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
   $('form :submit').click(function (event) {
       if (confirm('Are you sure you want to delete it?')) {
           var TIMEOUT = 1000;
           var TIMEOUT = 10000;
           var target = event.target;
           var $form = $(target).closest('form');
           var $submit = $form.find(':submit');
           // clickしたsubmitの値をhiddenに保存
           var $hidden = $('<input/>', {
               type: 'hidden',
               name: target.name,
               value: target.value
           }).appendTo($form);
           event.preventDefault();
           event.stopPropagation();
           // 全てのsubmitを無効化
           $submit.prop('disabled', true);
           // 時間経過でsubmitの無効化を解除
           setTimeout(function () {
               $hidden.remove();
               $submit.prop('disabled', false);
           }, TIMEOUT);
           $form.submit();
       } else {
           return false;
       }
   });
</script>
</body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る