Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Sam Bell
Sam Bell
4,398 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
222,348 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.