仅在选中复选框时提交表单
Posted
技术标签:
【中文标题】仅在选中复选框时提交表单【英文标题】:Submit form only if a checkbox is checked 【发布时间】:2021-09-22 03:47:26 【问题描述】:我正在尝试使用 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>
如果有人验证了一个复选框,表单会自动提交。
【问题讨论】:
如果你选中了这个框,那么过一段时间表单应该提交数据? 是的,几秒钟后发送数据 将required
添加为<input name="cconfirma" type="checkbox" required>
我已经试过了,但是没用
【参考方案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>
【讨论】:
i.imgur.com/aVihDjS.png 勾选后不发送数据 @user13523236 我忘了提,取消注释将提交表单的那一行。我为 sn-p 注释掉了它以上是关于仅在选中复选框时提交表单的主要内容,如果未能解决你的问题,请参考以下文章