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