Форма отправки данных на e-mail PHP и JavaScript

@fyshk · Регистрация: 18.12.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте, всех с наступившим 2016, в новогодние праздники хочу попробовать работу формы отправки которая работает без перезагрузки страницы, нашел как реализовать такую на одном из сайтов по запросу в гугле. Вот что там написано:

1. Форма связи без перезагрузки

PHP вынесен в отдельный файл
при нажатии клавиши F5 форма не будет отправлена снова
после отправки формы страница не будет перезагружена
проверка на правильность заполнения полей осуществляется не на стороне сервера
не поддерживается IE8 и ниже (нужно дополнить код аналогами addEventListener(), preventDefault() и XMLHttpRequest или использовать вариант 2)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>
 
<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?
if (array_key_exists('messageFF', $_POST)) {
   $to = 'свой@yandex.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['nameFF'];
}
?>

Согласно моей форме:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<form class="cd-form floating-labels" form method="POST">
        <fieldset>
            <legend>Answer</legend>
 
        
 
            <div class="icon">
                <label class="cd-label" for="cd-name">Имя</label>
                <input class="user" type="text" name="cd-name" id="cd-name" required>
            </div> 
 
          
            <div class="icon">
                <label class="cd-label" for="cd-email">Email</label>
                <input class="email error" type="email" name="cd-email" id="cd-email" required>
            </div>
        </fieldset>
 
            <div class="icon">
                <label class="cd-label" for="cd-textarea">Answer</label>
                <textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
            </div>
 
            <div>
                <input type="submit" value="Send Message">
            </div>
        </fieldset>
    </form>
 
// переделал скрипт
 
    <script>
document.getElementById('cd-form floating-labels').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "send.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("cd-name=" + f.cd-name.value + "&cd-email=" + f.cd-email.value + "&cd-textarea=" + f.cd-textarea.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.cd-textarea.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.cd-textarea.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
 
</script>

и переделал файл send.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?
if (array_key_exists('cd-textarea', $_POST)) {
   $to = '********@yandex.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['cd-name']."\nEmail: ".$_POST['cd-email']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['cd-textarea'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['cd-name'];
}
?>

И вобщем ничего не работает, когда все заполняешь и нажимаешь отправить то форма отчищается и все. Если же добавить form action="send.php" то письмо приходит, но после нажатия на кнопку отправить загружается страница send.php cо словом которое написали в строчку Имя. Хостинг Hostinger

Помогите разобраться

@Xenox · 04.01.2016, 14:15

Сообщение от fyshk

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById('cd-form floating-labels').addEventListener('submit', function(evt){
* var http = new XMLHttpRequest(), f = this;
* evt.preventDefault();
* http.open("POST", "send.php", true);
* http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
* http.send("cd-name=" + f.cd-name.value + "&cd-email=" + f.cd-email.value + "&cd-textarea=" + f.cd-textarea.value);
* http.onreadystatechange = function() {
* * if (http.readyState == 4 && http.status == 200) {
 * * *alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!'); * *
* * * f.cd-textarea.removeAttribute('value'); // очистить поле сообщения (две строки)
* * * f.cd-textarea.value='';
* * }
* }
* http.onerror = function() {
* * alert('Извините, данные не были переданы');
* }
}, false);

Почему бы вам не использовать jq, реализовать намного проще и легче.
Например так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.cd-form submit').click(function() {
    $.ajax({
            type: 'POST',
            url: 'send.php',
            data: {
        'cd-name'       : $('#cd-name').val(),
                'cd-email'      : $('#cd-email').val(),
                'cd-textarea'   : $('#cd-textarea').val()
      },
            success: function(res){
                console.log(res);
                if (res == 'success'){
                    alert('Письмо отправлено');
                }else {
                    alert('Произошла ошибка');
                }
            }
        }); 
});

И преобразовать send.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if (array_key_exists('cd-textarea', $_POST)) { // Не самая лучшая проверка
   $to = '********@yandex.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['cd-name']."\nEmail: ".$_POST['cd-email']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['cd-textarea'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   if(mail($to, $subject, $message, $headers)) {
     echo 'success'; //Это то, что передается в функцию success ajax-запроса. Там проверяем если все успешно выводит что сообщение отправлено.
   }else {
     echo 'false'; //Иначе выводим что произошла ошибка.
   }
   
}else {
  echo 'false';
}

Ну и подключить jquery вначале html документа с формой

HTML5
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

@fyshk · 11.01.2016, 20:12 **[ТС]**

Вобщем попробовал все равно ничего не работает, если нажимаю отправить страница просто обновляется и заполненные данные исчезают, а должно появляться сообщение: Письмо отправлено или Произошла ошибка. Кстати если создать файлы со значениями

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>
 
<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>

и

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?
if (array_key_exists('messageFF', $_POST)) {
   $to = 'свой@yandex.ru';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['nameFF'];
}
?>

и загрузить на хостинг то все прекрасно работает как надо, но как только пытаюсь применять это для моей формы то результат точно такой же как я описал выше. Я думал косяк в том что в примере указано

HTML5
1
id="feedback-form"

и

HTML5
1
document.getElementById('feedback-form'

тогда так как у меня

HTML5
1
form class="cd-form"

изменил скрипт на

HTML5
1
document.getElementsByClassName('cd-form')

но эта штука все равно не хочет работать хотя повторюсь если ничего не менять в примере все прекрасно работает, не пойму что надо поменять в моем коде чтобы все заработало. Кстати сейчас мой код выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>111</title>
    <link rel="stylesheet" href="style3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
    
</head>
 
 
<form class="cd-form" method="POST">
        <fieldset>
            <legend>Answer</legend>
 
        
 
            <div class="icon">
                <label class="cd-label" for="cd-name">Имя</label>
                <input class="user" type="text" name="cd-name" id="cd-name" required>
            </div> 
 
          
            <div class="icon">
                <label class="cd-label" for="cd-email">Email</label>
                <input class="email error" type="email" name="cd-email" id="cd-email" required>
            </div>
        </fieldset>
 
            <div class="icon">
                <label class="cd-label" for="cd-textarea">Answer</label>
                <textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
            </div>
 
            <div>
                <input type="submit" value="Send Message">
            </div>
        </fieldset>
    </form>
 
 
    <script>
$('.cd-form submit').click(function() {
    $.ajax({
            type: 'POST',
            url: 'send.php',
            data: {
        'cd-name'       : $('#cd-name').val(),
                'cd-email'      : $('#cd-email').val(),
                'cd-textarea'   : $('#cd-textarea').val()
      },
            success: function(res){
                console.log(res);
                if (res == 'success'){
                    alert('Письмо отправлено');
                }else {
                    alert('Произошла ошибка');
                }
            }
        }); 
});
</script>
</body>
</html>

Возможно я что то неправильно сделал чтобы заработал ваш пример? send.php разумеется изменен.

@fanatikus · 11.01.2016, 21:33

так должно работать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form class="cd-form" method="POST">
        <fieldset>
            <legend>Answer</legend>
            <div class="icon">
                <label class="cd-label" for="cd-name">Имя</label>
                <input class="user" type="text" name="cd-name" id="cd-name" required>
            </div> 
            <div class="icon">
                <label class="cd-label" for="cd-email">Email</label>
                <input class="email error" type="email" name="cd-email" id="cd-email" required>
            </div>
        </fieldset>
        <fieldset>
            <div class="icon">
                <label class="cd-label" for="cd-textarea">Answer</label>
                <textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
            </div>
 
            <div>
                <input type="submit" name="sub" value="Send Message">
            </div>
        </fieldset>
    </form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    $(function(){
        $('input[name=sub]').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'file.php',// поменять на свой файл
                data: {'cd-name': $('#cd-name').val(),
                        'cd-email': $('#cd-email').val(),
                        'cd-textarea': $('#cd-textarea').val()
                },
                success: function(res){
                    console.log(res);
                    if (res === 'success'){
                        alert('Письмо отправлено');
                    }else {
                        alert('Произошла ошибка');
                    }
                }
            }); 
        });
    })

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (array_key_exists('cd-textarea', $_POST)) {
   $to = 'fan@gmail.com'; // поменять на свой
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['cd-name']."\nEmail: ".$_POST['cd-email']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['cd-textarea'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   if(mail($to, $subject, $message, $headers))
   {
       echo 'success';
   }
   else 
   {
       echo 'error';
   }
}

@fyshk · 14.01.2016, 19:51 **[ТС]**

Сейчас работает, но только в одну сторону, при любом раскладе пишет что произошла ошибка, даже в том случае если я не заполнил поля, в таком случае должен вроде как писать мол заполни имя, заполни электропочту как надо и тп., а сейчас просто пишет "Произошла ошибка" независимо от того заполнил ли я или нет. Вот первый способ так то прекрасно работает, но почему то не могу заставить его работать с моей формой, не понимаю что не так. Вроде и названия изменил согласно моей форме feedback-form=cd-form, nameFF=cd-name, contactFF=cd-email, messageFF=cd-textarea.

JavaScript
1
document.getElementById('feedback-form')

=

JavaScript
1
document.getElementsByClassName('cd-form')

Может быть я что-то не понимаю или упускаю из виду. Может быть она не работает из-за строения формы там просто input внутри form, а у меня еще и внутри div? Может быть такое? Не думал что застряну на простом переименовании и небольшом изменении кода.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .