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> |
| ``` |
