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

#php #javascript #html #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);
}

Ответы
Ответ 1

Обработчик должен просигнализировать, что стандартное сабмит-поведение формы не требуется:

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);
});


или