JavaScript

Stephanie Roberts
Stephanie Roberts
801 Points

Submitting a form when 1 radio button from each fieldset has been checke

I am trying to submit a form only when all text inputs have been filled and 1 radio buttons from each fieldset has been checked. Here is my js code below, at the moment its looking for ALL radio buttons to be checked in order to submit the form but this is not what I want it to do and I am not sure how to target just 1 radio button from each fieldset. I have 4 fieldsets each containing 3-5 radio buttons in each. I only need 1 of these from each fieldset to be checked in order to submit the form.

// submit button var buttonEl = document.querySelector('.submit');

// if inputs are filled, the disabled button changes to enabled
formCheck = function(event, target){

    window.setTimeout(function(){

        // registration process
        var process = tcdom.getParent(target, '.process');
        var canSubmit = true;

        var optionEls = process.querySelectorAll('.input');

        // if all inputs have been checked or have a value enable submit button
        for (i = 0; i < optionEls.length; i++){

            if (!optionEls[i].querySelector('input:checked') && !optionEls[i].querySelector('input[type=text]')){
                canSubmit = false;
            }    
        }

        console.log('Can submit', canSubmit);

        // enabling submit button
        buttonEl.disabled = !canSubmit; 

    }, 100);

};

1 Answer

Steven Parker
Steven Parker
170,474 Points

You won't be able to make this determination by examining the elements individually, since you know that most radio buttons will not be checked.

Instead, you'll need to examine each button group together, and disqualify the submit only when all of them in a particular group are not checked.

You might make use of "getElementsByName" to loop through all of the associated buttons of each group.