jQuery disable/enable submit button

Question

I have this HTML:

How can I do something li

Answer 1

Vanilla JS Solution. It works for a whole form not only one input.

In question selected JavaScript tag.

HTML Form:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })

        

            User Name
            
        
        

            Password
            
        
        

            Retype Password
            
        
        

            Email
            
        
        
    

Some explanation:

In this code we add keyup event on html form and on every keypress check all input fields. If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button.

If you need to disable submit button until all required input fields are filled in - replace:

inputs.forEach(function(input, index) {

with:

required_inputs.forEach(function(input, index) {

where required_inputs is already declared array containing only required input fields.