При отправки формы должно выводиться сообщение на той же странице под формой

@maks_7 · Регистрация: 14.10.2014

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

Доброго времени суток, уважаемые форумчане. Есть форма, которую я отправляю на e-mail. Она отправляется, все нормально. Только после отправки открывается чистая страница. Я хочу, чтобы при нажатии на кнопку "отправить", под формой появлялось сообщение "Ваше письмо успешно отправлено!", а данные формы отправлялись незаметно для пользователя. Вот что у меня есть:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="handler.php" method="post" name="letter">
             <div>
                <div>Ваше имя</div>
                <input name="name" type="text" />
             </div>
             <div>
                <div class="lab">Ваш Email</div>
                <input name="email" type="email" />
             </div>
             <div>
                <div>Ваше сообщение</div>
                <textarea name="text" rows="10"></textarea>
            </div>
                <input id="send" name="submit" type="submit" value="Отправить" />
          </form>
          <h5 id="sb"></h5>

JavaScript
1
2
3
4
5
$(document).ready(function() {
    $('#send').submit(function(){
       $('#sb' ).append( "Ваше письмо успешно отправлено!" );
    });
});

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 if( isset($_POST['name'],$_POST['email'],$_POST['text']) ) {
 $name = trim($_POST['name']);
 $email = trim($_POST['email']);
 $text = trim($_POST['text']);
  if(empty($name) || empty($email) || empty($text)) { //если что то не ввели
   echo 'Вы заполнили не все поля!';
  }
  else { //все поля заполнены, отправляем
   $mailto = 'k33@ya.ru';
   $subject = 'Тема письма';
//формируем текст сообщения
   $message  = 'Сообщение от пользователя <b>'.$name.'</b>';
   $message .= 'E-mail пользователя: <a href="mailto:' . $email . '">' . $email . '</a><br />';
   $message .= 'Текст сообщения:<br />' . $text;
   mail($mailto, $subject, $message, $headers);
 //exit;   
  }
}
?>

@Mr_Sergo · 06.05.2018, 21:05

maks_7,
index.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="javascript:void(null);" method="POST" name="letter" id="nameEmail">
    <div>
        <div>Ваше имя</div>
        <input name="name" type="text" />
    </div>
    <div>
        <div class="lab">Ваш Email</div>
        <input name="email" type="email" />
    </div>
    <div>
        <div>Ваше сообщение</div>
        <textarea name="text" rows="10"></textarea>
    </div>
    <input id="send" name="submit" type="submit" value="Отправить" />
</form>
<h5 id="sb"></h5>

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
 
$('#send').click(function(){
    $.ajax({
        type: 'POST',
        url: 'handler.php',
        data: $('#nameEmail').serialize(),
        success: function(data){
            $('#sb').html(data);
        }
    });
});
 
});

handler.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<? header('Content-Type: text/html; charset=utf-8');
 
if( isset($_POST['name'],$_POST['email'],$_POST['text']) ){
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $text = trim($_POST['text']);
    if(empty($name) || empty($email) || empty($text)) {
        echo 'Вы заполнили не все поля!';
    }
    else{ //все поля заполнены, отправляем
        /*$mailto = 'k33@ya.ru';
        $subject = 'Тема письма';
        //формируем текст сообщения
        $message  = 'Сообщение от пользователя <b>'.$name.'</b>';
        $message .= 'E-mail пользователя: <a href="mailto:' . $email . '">' . $email . '</a><br />';
        $message .= 'Текст сообщения:<br />' . $text;
        mail($mailto, $subject, $message, $headers);
        //exit;*/
 
        echo 'Ваше письмо успешно отправлено!';
    }
}
 
?>

Добавлено через 1 минуту
только в else не забудьте раскомментировать отправку письма

@galawar · 06.05.2018, 21:08

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$contactForm = $('#contact_form'); // заменить на свой селектор формы
 
$('#send').on('click', function (e) {
    if ($contactForm.valid()) {
        var url = '../mail.php'; // заменить на свой путь
        $.ajax({
            type: 'POST',
            url: url,
            data: $contactForm.serialize(),
            success: function (data) {
                successSend();
            }
        });
        e.preventDefault();
    } else {
        return false;
    }
});
 
function successSend(e) {
  $('#sb' ).append( "Ваше письмо успешно отправлено!" );
}

@maks_7 · 07.05.2018, 08:40 **[ТС]**

Спасибо огромное за ответы! Только, наверно, я чего-то не соображу. Попробовал два варианта, но письмо не отправляется.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="javascript:void(null);" method="post" name="letter" id="nameEmail">
             <div>
                <div>Ваше имя</div>
                <input name="name" type="text" />
             </div>
             <div>
                <div>Ваш Email</div>
                <input name="email" type="email" />
             </div>
             <div>
                <div>Ваше сообщение</div>
                <textarea name="text" rows="10"></textarea>
            </div>
                <input id="send" name="submit" type="submit" value="Отправить" />
          </form>
          <h5 id="sb"></h5>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<? header('Content-Type: text/html; charset=utf-8');
 
if( isset($_POST['name'],$_POST['email'],$_POST['text']) ){
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $text = trim($_POST['text']);
    if(empty($name) || empty($email) || empty($text)) {
        echo 'Вы заполнили не все поля!';
    }
    else{ //все поля заполнены, отправляем
        $mailto = 'k33@ya.ru';
        $subject = 'Тема письма';
        //формируем текст сообщения
        $message  = 'Сообщение от пользователя <b>'.$name.'</b>';
        $message .= 'E-mail пользователя: <a href="mailto:' . $email . '">' . $email . '</a><br />';
        $message .= 'Текст сообщения:<br />' . $text;
        mail($mailto, $subject, $message, $headers);
        //exit;*/
 
        echo 'Ваше письмо успешно отправлено!';
    }
}
 
?>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
 
$('#send').click(function(){
    $.ajax({
        type: 'POST',
        url: 'handler.php',
        data: $('#nameEmail').serialize(),
        success: function(data){
            $('#sb').html(data);
        }
    });
});
 
});

@maks_7 · 08.05.2018, 15:28 **[ТС]**

Здравствуйте, уважаемые zlojnaxa, и galawar! Огромное Вам человеческое спасибо за Ваши ответы.
Первый вариант от zlojnaxa отлично работает. Вариант galawar, работает, но мне пришлось его немного изменить. Вот что получилось:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function() {
$contactForm = $('#nameEmail'); // заменить на свой селектор формы
 
$('#send').on('click', function (e) {
   
        var url = 'handler.php'; // заменить на свой путь
        $.ajax({
            type: 'POST',
            url: url,
            data: $contactForm.serialize(),
            success: function (data) {
            successSend();
            }
        });
        e.preventDefault();
    
});
 
function successSend(e) {
  $('#sb' ).append( "Ваше письмо успешно отправлено!" );
}
});

$contactForm.valid я убрал, так как была ошибка "contactForm.valid is not a function" - не знал как правильно поступить с этой проблемой.

@Mr_Sergo · 08.05.2018, 19:36

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

Огромное Вам человеческое спасибо

Любую благодарность заменяет кнопка спасибо- учитесь пользоваться форумом.
ССори сразу не обратил внимания что клацнули

Добавлено через 3 часа 36 минут

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

$('#sb' ).append( "Ваше письмо успешно отправлено!" );

только при $('#sb' ).append( "Ваше письмо успешно отправлено!" ); будет добавлять новое сообщение к уже существующем, то есть если человек дважды, трижды нажмет кнопку Отправить то в поле вывода "успеха" будет два или три одинаковых сообщения- что наверное не нужно.
А вот если вместо $('#sb' ).append( "Ваше письмо успешно отправлено!" ); написать $('#sb' ).html( "Ваше письмо успешно отправлено!" ); то уже существующее сообщение "Ваше письмо успешно отправлено!" замениться на такое же "Ваше письмо успешно отправлено!" --- то есть сколько бы раз человек не нажал кнопку Отправить ввсегд будет выводиться только одно сообщение об успешной отправке.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

При отправки формы должно выводиться сообщение на той же странице под формой

Решение

Решение