Enabling a button based on selected values

Question

Fair warning I have super janky code. With that being said, I have my button disabled from the start, as to reduce the amount of human error that happens upon submission of my form. I need to enable it when three specific fields are populated. However, one of those fields is a header tag in html that displays a stop watch. A jquery function then scrapes that output as text and stores it into an object called userInfo. I want to enabled my submission button when IDs task, source, and output are not blank/ = "00:00:00".

I have tried multiple if statements in various places to check the validation of the input values. However, with the most current if statement, it enables the button when the default is "disabled"

<div class ='row'>
<div class="input-field col s6">
 <input type="text" id="task" class="autocomplete" placeholder ='Task' required>
<div class="input-field col s6">
<select id = 'source'>
<option value="" diasable selected></option>
      <option value="some source">source1</option>
      <option value="other source">source2</option>
      </select>
      <label>source1 or source2</label>
</div>
<h2 id = 'output'><b>0:00:00:00</b></h2>
<button id="start"class="waves-effect waves-light btn">start<i class="material-icons right">timer</i></button>
<button id="stop"class="waves-effect waves-light btn">stop<i class="material-icons right">timer_off</i></button>
<button id ="btn" class="btn waves-effect waves-light #26a69a" type="submit" name="action" disabled>Track It!
<i class="material-icons right">access_time</i>
</button>

I need the output for task,source,and the text value for output to not be blank/ "00:00:00" for the button to be enabled.

And here is some of the javascript

 M.toast({html: 'Record Submitted'})
   var userInfo = {};
   userInfo.task= document.getElementById('task').value;
   userInfo.source= document.getElementById('source').value;
   userInfo.timeSpent= $("#output").text();
   userInfo.units= $("#count").text();

    google.script.run.userClicked(userInfo);
    document.getElementById('task').value='';

    var source = document.getElementById('source');
    source.selectedIndex = 0;
    M.FormSelect.init(source);

}


var h1 = document.getElementById('output'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    //clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

Answer 1

Try using a "change" event listener, and test if the button should be enabled or disabled on each change.

document.addEventListener("change", validate);

// I need the output for task,source,and the text value for output to not be blank/"00:00:00" for the button to be enabled.
function validate() {
  const ready = $("#task").val() && $("#source").val() && $("#output").text() !== "00:00:00";
  $("#btn").prop("disabled", ! ready); 
}

Answer 2

Reading through, I believe you want to change disabled attribute of the button#btn to enabled based on the value of select#source . you can use this sample code below to achieve that

// 1st: get select#source and button#btn using their ID
var source = document.getElementById('source');
var button= document.getElementById('btn');

// 2nd : capture source value on change using JS Event Listener
source.addEventListener("change", function() {
  if(source.value == "some source") {
    // 3rd : remove disabled attribute and set enabled attribute
    button.removeAttribute("disabled");
    button.setAttribute("enabled", "");
  }
});