Отправка формы без перезагрузки страницы

@marketarea · Регистрация: 11.06.2016

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

Всем привет, интересует сабмит данныйх из html формы и отправка их на мейл без перезагрузки страницы.

На сколько я понимаю нужно : php(или что другое) + ajax
НО интересует есть ли в природе вариант без использования JS/AJAX ?

Если нет, то есть ли какая нибудь малюсенькая современная библиотеа(и) + готовый скрипт, где я пропишу нужные поля формы/переменные которые будут сабмитится + мейлы куда отправлять форму и таким образом "сходу заведу систему"..?

php скрипт я как то состряпал - отправляет а вот с JS/AJAX мне пока рановато...

Добавлено через 3 часа 20 минут
Вот такой HTML:

HTML5

        <div id="cbf" class="callback-modal">
            <form action="action_page.php">
                <a href="#" class="closebtn">×</a>
                <fieldset>
                    <legend align="center">Обратный звонок</legend>
                    <input type="tel" name="usrtel" placeholder="Ваш телефон" required>
                </fieldset>
                <input type="submit" value="Отправить">
            </form>
        </div>

Вот такой PHP скрипт получился:

PHP

<?php
$to = "@gmail.com, somebodyelse@example.com";
$subject = "Заявка";
$name = $_POST['name'];
$usrtel = $_POST['usrtel'];
$email = $_POST['email'];
$message = "Name:" .$name. "\r\n Tel:" .$usrtel. "\r\n Email:" .$email;
$message ='
<html>
<head>
<title>Помощь в получении кредита</title>
</head>
<body>
<p>Имя: '.$name.'</p>
<p>Телефон: '.$usrtel.'</p>
<p>Email: '.$email.'</p>
</body>
</html>';
 
 
 
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
 
// More headers
$headers .= 'From: <no-reply@' . "\r\n";
$headers .= 'Cc: myboss@example.com' . "\r\n";
 
//send email
if (mail($to, $subject, $message, $headers)) {
    //formatting for error message
    $emailSent = "block";
    $emailFailed = "none";
} else //if the email fails to send
{
    $emailSent = "none";
    $emailFailed = "block";
}
?>

Вот такой JS:

Javascript

$(function() {
    $('form').submit(function(e) {
        var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize()
        }).done(function() {
            console.log('success');
        }).fail(function() {
            console.log('fail');
        });
        //отмена действия по умолчанию для кнопки submit
        e.preventDefault();
    });
});

Как сделать так чтобы после отправки формы собщалось что данные отправлены и чел не тыкал сотни раз в кнопку?)
А также,
1. на странице есть еще парочка форм, как сделать так чтобы эти формы обрабатывал один PHP скрипт а не несколько для каждой форомы.
2. есть повторяющиеся формы которые вылазят в модальном окне(запостил выше - кнопка "обратный звонок")б как сделать так чтоб не дулировать постоянно этот HTM код на странице?

@denisco · 03.09.2016, 14:41

Привет.

Если нет, то есть ли какая нибудь малюсенькая современная библиотеа(и) + готовый скрипт, где я пропишу нужные поля формы/переменные которые будут сабмитится + мейлы куда отправлять форму и таким образом "сходу заведу систему"..?

Плагин Contact Form 7 не рассматривали? Он умеет то, что Вы описали.

@marketarea · 03.09.2016, 14:54 **[ТС]**

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

Плагин Contact Form 7

дело в том что не знаю почему тему перенесли в вордпрес, так как все действия происходят на голой HTML/CSS странице

@denisco 94 / 94 / 35 Регистрация: 25.08.2016 Сообщений: 273
	03.09.2016, 14:41	2
	Привет. Если нет, то есть ли какая нибудь малюсенькая современная библиотеа(и) + готовый скрипт, где я пропишу нужные поля формы/переменные которые будут сабмитится + мейлы куда отправлять форму и таким образом "сходу заведу систему"..? Плагин Contact Form 7 не рассматривали? Он умеет то, что Вы описали. 0

@marketarea 8 / 0 / 2 Регистрация: 11.06.2016 Сообщений: 261
	03.09.2016, 14:54 [ТС]	3
	Сообщение от denisco Плагин Contact Form 7 дело в том что не знаю почему тему перенесли в вордпрес, так как все действия происходят на голой HTML/CSS странице 0