mercredi 23 mai 2018

If/Else with two checkboxes checked - Javascript

A real simple javascript function I'm getting stuck with... (Have googled alot and can't make it fully work!).

Basiclly, I have two check boxes. And I went my disclaimer to disappear, (only when both boxes have been checked. (See full code below).

If only one/none boxes are not checked, the disclaimer should still appear. And the form submit button is disabled.

Everything works fine. I can make the disclaimer disappear and deactivate the button, if one box is checked. But seems to not do anything, with my if/else statement below.

Basically, the "if" in my if/else statement, is not checking for the right logic.

I've googled and tried lots of variations. But can't get this one working.
Thank you!

  var formInput = document.querySelector("input[name=terms]");
  var marketingInput = document.querySelector("input[name=marketing]");
  var cvSubmitButton = document.querySelector("input[type=submit]");
  var checkBoxDiv = document.getElementById("checkboxRow");
  var scfSubmitButtonBorder = document.querySelector(".scfSubmitButtonBorder");

  cvSubmitButton.classList.add('disabled');
  scfSubmitButtonBorder.style.cursor = "not-allowed";

  var legalClause = document.createElement('div');
  legalClause.innerHTML = "<div id='disclaimer'><br /><p>* Your applicaton cannot be submitted, unless you have agreed to read our Terms of Use, Privacy Policy and Cookie Policy.</p></div>";
  checkBoxDiv.appendChild(legalClause);


  // EVENTLISTENER

    var boxes = document.querySelectorAll('input[type=checkbox]:checked').length;

    formInput.addEventListener("change", function(){

     if((formInput.checked) && (marketingInput.checked)) {

      cvSubmitButton.classList.remove('disabled');
      checkBoxDiv.removeChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "pointer";
      console.log('checked');
     } else {

      cvSubmitButton.classList.add('disabled');
      checkBoxDiv.appendChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "not-allowed";
      console.log('not checked');
     }
  });

Aucun commentaire:

Enregistrer un commentaire