@survivor2005

Ajax как отправить данные из формы?

Добрый день, дошел до асинхронного js, в частности интересует отправка данных из формы.
Есть простая форма:
<form action="#" name="form" method="POST">
        <input type="text" name="name" value="blalba">
        <input type="email" name="email" value="blalb@bal.ru">
        <input type="tel" name="phone" value="34343">
        <button type='submit'>отправить</button>
    </form>

и написал скрипт:
let sendingStatus = {
    sending: 'отправка...',
    sent: "отправлено",
    fail: "Что то пошло не так...."
}



let form = document.forms.form,
input= form.querySelectorAll('input'),
statusMessage = document.createElement('div');
statusMessage.classList.add('status');

form.addEventListener('submit',(event)=>{
     event.preventDefault();
    form.append(statusMessage);
   
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "form/mail.php",true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    let formData = new FormData(form);
     xhr.send(formData);
    xhr.onreadystatechange=()=>{
        if(xhr.readyState<4){
            statusMessage.innerHTML=sendingStatus.sending;
        }else if(xhr.readyState===4){
            if(xhr.status == 200 && xhr.status<300){
                statusMessage.innerHTML=sendingStatus.sent;
                for(let i of input){
                    i.value='';
                }
            }else statusMessage.innerHTML=sendingStatus.fail;
        }
    };
 });


Код отрабатывает, но данные из формы не забираются, форма приходит без данных. Не подскажите как из передать?
Спасибо.
  • Вопрос задан
  • 536 просмотров
Решения вопроса 1
cyber-jet
@cyber-jet
Запустил ваш код, судя по всему, данные формы отправляются.

PS: Используете стрелочные функции, почему бы не использовать современный fetch, async/await?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы