dimanche 1 octobre 2017

JavaScript check for input only works backwards

When I fill in all the input fields and choose an option in the select dropdown, for some reason the class will not be removed unless I start with the select dropdown. How come is that? I really don't get it.

Here's my JavaScript:

function checkForInput() {
    var copyButton = document.getElementById('copyButton');
    var inputFields = firstNameInput.value && lastNameInput.value && emailInput.value && jobTitleInput.value && departmentSelect.options[departmentSelect.selectedIndex].value;

    if(inputFields != '') {
        copyButton.classList.remove('disabled');
    } else {
        copyButton.classList.add('disabled');
    }
}

And my HTML:

<div class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col m6 s12">
          <input id="first_name_input" type="text" class="validate" onkeyup="firstNamePrev(); checkForInput();">
          <label for="first_name">Fornavn</label>
        </div>
        <div class="input-field col m6 s12">
          <input id="last_name_input" type="text" class="validate" onkeyup="lastNamePrev(); checkForInput();">
          <label for="last_name">Efternavn</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m4 s12">
          <input id="email_input" type="email" class="validate" onkeyup="emailPrev(); checkForInput();">
          <label for="email">Email</label>
        </div>
        <div class="input-field col m4 s12">
          <input id="job_title_input" type="text" class="validate" onkeyup="jobTitlePrev(); checkForInput();">
          <label for="job_title">Jobtitel</label>
        </div>
                <div class="input-field col m4 s12">
                    <select id="department_select" onchange="departmentPrev();" onkeyup="checkForInput();">
                        <option value="" disabled selected>Afdeling</option>
                        <option value="administration">Administration</option>
                        <option value="marketing">Marketing</option>
                        <option value="support">Support</option>
                        <option value="reklamation">Reklamation</option>
                        <option value="produktion">Produktion</option>
                    </select>
                </div>
      </div>
    </form>
  </div>

Aucun commentaire:

Enregistrer un commentaire