const button = document.getElementById('submit');
const page = document.getElementById('page');

const check = document.getElementsByClassName('check');
const excla = document.getElementsByClassName('excla');
const entry = document.getElementsByClassName('entry');
const help = document.getElementsByClassName('help');


document.getElementById("form").addEventListener('submit', function(e) {
    e.preventDefault();
    if (checkInputs() == true) {
        console.log('check');
        var data = new FormData(this);

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                alert('Votre ticket à bien été pris en compte');
            } else if (this.readyState == 4) {
                alert('une erreur est survenue...');
            }
        };
        xhr.open('POST', 'cible.php', true);
        xhr.send(data);
    }
});

function displayHelp(id) {
    id.style.display = 'block';
}

function hideHelp(id) {
    id.style.display = 'none';
}

function checkInputs() {
    let success = true;
    for (let i=0; i < (entry.length - 1) ; i++) {
        if (entry[i].value == '') {
            setError(i);
            success = false;
        }
        else {
            setSuccess(i);
        }
    }
    return success;
}

function setError(indice) {
    check[indice].style.display = 'none';
    excla[indice].style.display = 'block';
    document.getElementsByTagName('small')[indice].style.display = 'block';
}

function setSuccess(indice) {
    check[indice].style.display = 'block';
    excla[indice].style.display = 'none';
    document.getElementsByTagName('small')[indice].style.display = 'none';
}