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