При отправке формы с использованием ajax перезагружается страница

Здравствуйте при отправке формы с использование ajax перезагружается страница почему так происходит подскажите ?

var inputName = document.querySelector('#name'); var inputEmail = document.querySelector('#email'); var formSend = document.querySelector('#send');
formSend.addEventListener('click', function() { var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); });
var formAjax = function(params) { var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(innerHTML = xhr.responseText); } }
xhr.open('POST', 'mail.php'); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(params); } $name = trim($_POST['name']); $email = trim($_POST['email']);
if ($name == '' || $email == '') { echo 'Заполните все поля'; } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo 'Введите коректные email'; } else { file_put_contents('app.txt', "$name $email
", FILE_APPEND); echo 'Спасибо'; }

Ответ

Обработчик должен просигнализировать, что стандартное сабмит-поведение формы не требуется:
formSend.addEventListener('click', function() { var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); return false; // !!! });
или
formSend.addEventListener('click', function(event) { event.preventDefault(); // !!! var params = 'name=' + inputName.value + '&' + 'email=' + inputEmail.value; formAjax(params); });
или