3

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

<form name="form" id="form">
    <input type="text" name="inputname" id="name" placeholder="Введите Имя..." required="required">
    <input type="email" name="inputemail" id="email" placeholder="Введите Эл.почту..." required="required">
    <input type="submit" id="send" value="Отправить">
</form>
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);
}
<?php

$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 \n", FILE_APPEND);
    echo 'Спасибо';
}

1 ответ 1

4

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

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

или

<input type="button" id="send" value="Отправить"> <!-- type="button" !!! -->
2
  • так тогда же можно в место <input type="submit"> использовать <input type="button"> и всё будет работать так ведь ?
    – brin gonor
    8 мар 2018 в 22:41
  • @bringonor совершенное верно
    – user176262
    8 мар 2018 в 22:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.