CODEWITHSUNDEEP
javascriptjquerylaravelcheckbox
user13523236
user13523236

Reputation: 135

Submit form only if a checkbox is checked

I'm trying to submit a form with javascript, I need that when verifying a checkbox send the form automatically, in a few seconds.

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

If someone verifies a checkbox, the form is submitted automatically.

Upvotes: 0

Views: 193

Answers (1)

Kinglish
Kinglish

Reputation: 23664

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>

Upvotes: 1

Related Questions