How to dynamically disable elements in a tooltip drop down with an onchange function

Question

I have a submit form in html with various input fields which I would like to dynamically disable (grey out) depending on an input value in a tooltip field called "Source"

My code for the tooltip drop down looks like :

<script type="text/javascript">
function loadParameters(source){}
</script>
                <label class="tooltip">Source<span class="classic">Source of data</span></label>
                <select id="source" name="source" onchange="loadParameters(source)" >
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>    
                    <option value="D">D</option>
                </select>

My loadParameters function is supposed to loop through DOM elements and disable certain other fields depending on the selected source. My code works, but I get an 'onchange function not defined' error.

Am I adding the loadParameters function in the wrong place? Thanks for the help.

Answer 1

EDIT:

I believe you need to grab the source in the function itself, instead of in the call to the function. You get the source by selecting an element from the DOM using something like document.querySelector(), document.getElementbyId(), etc.

I edited the code to look like this:

<label class="tooltip">Source<span class="classic">Source of data</span></label>
<select id="source" name="source" onchange="loadParameters()" >
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>    
    <option value="D">D</option>
</select>

<script type="text/javascript">
    function loadParameters() {
        const select = document.getElementById("source").value;
        console.log(select);
        // whatever else you need to do in the function
      }
</script>