我正在尝试使用 JavaScript 提交表单,我需要在验证复选框时在几秒钟内自动发送表单。
<form method="POST" action="{{ route('turnox', $event->id) }}">
{{ method_field('PUT') }}
@csrf
<div class="row">
<div class="col">
Confirmar Asistencia:
</div>
<div class="col">
<label class="switch s-icons s-outline s-outline-success mr-2">
<input name="cconfirma" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
<br>
<div class="row">
<div class="col">
Cancelar Turno:
</div>
<div class="col">
<label class="switch s-icons s-outline s-outline-danger mr-2">
<input name="ccancela" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</form>
如果有人验证复选框,表单将自动提交。
答案 0 :(得分:1)
let interv
window.addEventListener('DOMContentLoaded', () => {
document.addEventListener('click', e => {
if (e.target.type === 'checkbox') {
console.log('form submitting in 1 second')
interv = setTimeout(() => {
console.log('form submitting...');
// e.target.closest('form').submit();
}, 1000)
}
})
})
<form method="POST" action="{{ route('turnox', $event->id) }}">
<!-- {{method_field('PUT')}}
@csrf -->
<div class="row">
<div class="col">
Confirmar Asistencia:
</div>
<div class="col">
<label class="switch s-icons s-outline s-outline-success mr-2">
<input name="cconfirma" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
<br>
<div class="row">
<div class="col">
Cancelar Turno:
</div>
<div class="col">
<label class="switch s-icons s-outline s-outline-danger mr-2">
<input name="ccancela" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</form>