add and disable submit button until user chooses answers for drop down questions

I am trying to add a button to a web page that will be disabled until the user selects answers from from a drop down menu for each question. I have tried multiple approaches and end up with a submit button that's always active, always disabled or only works when extra elements like form tags are added to the page. However, I can not change anything on the existing page, except add a button and java script that looks at the existing field on the page.

Picture of existing HTML markup that can not be changed

$("#va11").keyup(function(event) {
    validateInputs();
});

$("#va12").keyup(function(event) {
    validateInputs();
});

$("#va13").keyup(function(event) {
    validateInputs();
});

function validateInputs(){
    var disableButton = false;

    var val1 = $("#cf_Q1").val();
    var val2 = $("#cf_Q2").val();
    var val3 = $("#cf_Q2").val();

    if(val1.length == 0 || val2.length == 0 || val3.length == 0)
        disableButton = true;

    $('#contact').attr('disabled', disableButton);
}

Solution

Try this:

<!DOCTYPE html>
<html lang='en'>
    <head>      

    </head>
    <body>
        <form>
            <label><br>
                <!-- Dropdown menu-->           
                <select id="cf_Q2" name="xvptags">
                    <option value=""></option>
                    <option trigger="Terminate" value="1: Under 18">1: Under 18</option>
                    <option value="2: 18-24">2: 18-24</option>
                    <option value="3: 25-34">3: 25-34</option>
                    <option value="4: 35-44">4: 35-44</option>
                    <option value="5: 45-54">5: 45-54</option>
                    <option value="6: 55-64">6: 55-64</option>
                    <option value="7: Older than 65">7: Older than 65</option>
                </select>
            </label><br>

            <!-- Disabled button -->
            <button type="button" id="button1" disabled>Click Me!</button>
        </form>

        <script type="text/javascript">
            //Something will be done when user clicks on "question1"-element
            document.getElementById("cf_Q2").addEventListener("change", function() {
                //Did user choose a valid option?
                if(this.selectedIndex > 0) {
                    document.getElementById("button1").disabled = false;
                }

                //No element is chosen anymore - button should be disabled again
                else {
                    document.getElementById("button1").disabled = true;
                }
            });
        </script>
    </body>
</html>

If you want to enable the button only when all questions are answered, you can use the following code:

<!DOCTYPE html>
    <html lang='en'>
        <head>      
        </head>
        <body> 
            <span style="font-size:16px;">Q1:&nbsp;</span>
            <span style="font-size:18px;">
                Are you over the age of 18?
            </span>
            <span style="font-size:18px;"> </span>

            <!-- Dropdown menu-->
            <select id="cf_Q1" name="xvptags">
                <option value=""></option>
                <option value="1: Yes">1: Yes</option>
                <option value="2: No">2: No</option>
            </select>

            <br><br>

            <span style="font-size:16px;">Q2:&nbsp;</span>
            <span style="font-size:18px;">
                For statistical purposes, please tell me which category your current age falls into?
            </span>
            <span style="font-size:18px;"> </span><br>

            <!-- Dropdown menu-->
            <select id="cf_Q2" name="xvptags">
                <option value=""></option>
                <option value="1: Under 18"></option>
                <option value="2: 18-24">2: 18-24</option>
                <option value="3: 25-34">3: 25-34</option>
                <option value="4: 35-44">4: 35-44</option>
                <option value="5: 45-54">5: 45-54</option>
                <option value="6: 55-64">6: 55-64</option>
                <option value="7: Older than 65">7: Older than 65</option>
                <br>
            </select>

            <br><br>

            <span style="font-size:16px;">Q3:&nbsp;</span>
            <span style="font-size:18px;">What is your gender?</span>

            <!-- Dropdown menu-->
            <select id="cf_Q3" name="xvptags">
                <option value=""></option>
                <option value="1: Male">1: Male</option>
                <option value="2: Female">2: Female</option>
            </select>

            <br><br><br>

            <!-- Disabled button -->
            <button type="button" id="button1" disabled>Click Me!</button>

            <script type="text/javascript">
                    var arr = document.getElementsByTagName('select');
                    
                    //Creates an array of length arr.length filled with -1
                    var array = Array(arr.length).fill(-1);

                    for(var i = 0; i < arr.length; i++) {
                        arr[i].addEventListener("change", function() {

                            //This should now also work with e.g. cf_Q12
                            var x = parseInt(this.id.substring(4)) - 1;
                            array[x] = this.selectedIndex;

                            var bool = false;
                            for(var j = 0; j < array.length; j++) {
                                if(array[j] < 1) {
                                    bool = true;
                                }
                            }
                            document.getElementById("button1").disabled = bool;
                        });
                    }
                </script>
        </body>
    </html>