Setting contact form and active SUBMIT button

I have sample Bootstrap button like


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

How to set colored button to green from grey when checkbox is checked and as active link button. So, my form can not be submitted if there is not chekcbox TRUE.

Set the disabled property. You should use IDs for things like this if you’re working with the DOM.

Something like this would work:

const someCheckbox = document.getElementById('checkboxid')
const someButton = document.getElementById('buttonid')

someCheckbox.addEventListener('change', (e) => {
  someButton.disabled = !someCheckbox.checked
})
1 Like

I think it is not as easy as that.
You can still submit the form by pressing enter. So I think it is not enough if the button is disabled.

var form = document.querySelector('form#contact')
form.addEventListener('submit', function(e){
    if(!someCheckbox.checked) {
        e.preventDefault()
    }
})

I have prepared a little codepen for you to test:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.