仅在选中复选框时提交表单

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 添加为&lt;input name="cconfirma" type="checkbox" required&gt; 我已经试过了,但是没用 【参考方案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 注释掉了它

以上是关于仅在选中复选框时提交表单的主要内容,如果未能解决你的问题,请参考以下文章

检查表单提交时至少选中一个复选框

选中复选框时提交表单

如果提交表单时未选中复选框,如何将布尔值更新为 0

通过选中复选框提交表单,并在指定的 div 中显示结果

如何在不提交表单的情况下获取选中或取消选中复选框的值

表单提交后选中的复选框保持选中/未选中状态