Hello. When you click on the "Call me back" button, you are redirected to the blank page site.ru/send.php

How to make, that without reloading the page just below the message “sent” was added?

http://f1.s.qip.ru/gbw3dGA8.png

Content send.php

<?php if((isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они $to = 'test@test.com'; //Почта получателя, через запятую можно указать сколько угодно адресов $subject = 'Обратный звонок'; //Загаловок сообщения $message = ' <html> <head> <title>'.$subject.'</title> </head> <body> <p>Телефон: '.$_POST['phone'].'</p> </body> </html>'; //Текст нащего сообщения можно использовать HTML теги $headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма $headers .= "From: Отправитель <test@test.com>\r\n"; //Наименование и почта отправителя mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail echo '<script>alert("Сообщение отправлено")</script>'; } ?> 

 <form action="send.php" method="post" class="form"> <input placeholder="Номер телефона" required/> <button type="submit">Перезвоните мне</button> </form>

  • You need to register in send.php conditions to display this or that message if the letter is sent or not sent. Send the form data to the send.php handler via ajax request, use it and display a message under the form. - Dmitriy Kondratiuk
  • Sounds like a spell! - caboke
  • one
    add to the question the code in send.php - Dmitriy Kondratiuk
  • Dmitriy. What should be added to the end of send.php, so that when it is triggered in the DIV with the name “BLABLABLA” the text “SUCCESS” is added? - caboke
  • added answer, set only message class style - Dmitriy Kondratiuk

2 answers 2

Now there is no opportunity to test but everything should work. At the end of send.php I made some minor edits, changed the form code a bit and added an Ajax request.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type='text/javascript' src='http://malsup.github.com/jquery.form.js'></script> <form action="send.php" method="POST" name="form" class="form" accept-charset="utf-8"> <input type="text" name="phone" placeholder="Номер телефона" required /> <input class="button" type="submit" name="submit" value="Перезвоните мне"> </form> <div class="masBlock"></div> <script> $(".button").click(function(){ $(".form").ajaxForm({ type: "POST", success: function(e){ alert(e); $(".masBlock").html(e); }, }); }); </script> <!-- <?php if((isset($_POST['phone'])&&$_POST['phone']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они $to = 'test@test.com'; //Почта получателя, через запятую можно указать сколько угодно адресов $subject = 'Обратный звонок'; //Загаловок сообщения $message = ' <html> <head> <title>'.$subject.'</title> </head> <body> <p>Телефон: '.$_POST['phone'].'</p> </body> </html>'; //Текст нащего сообщения можно использовать HTML теги $headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма $headers .= "From: Отправитель <test@test.com>\r\n"; //Наименование и почта отправителя $mailSend = mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail } if($mailSend) { // если переменная существует то письмо отправилось echo '<div class="message">"Сообщение отправлено"</div>'; // ели письмо отпрaвилось то выводим сообщение } else { echo '<div class="message">"Сообщение не отправлено"</div>'; // ели письмо не отправилось то выводим сообщение } ?> -->

  • Dmitry, and where you need to add this code $ (function () {$ (". Button"). Click (function ...? At the end send.php? - caboke
  • one
    You can paste after the form, corrected the answer. - Dmitriy Kondratiuk
  • After sending, there is a redirect to site / send.php, where "Message sent" is written on a white background. - caboke
  • one
    changed the answer, added a plugin for submitting forms and made some changes. - Dmitriy Kondratiuk
  • one
    Are you a plugin for sending forms <script type='text/javascript' src='http://malsup.github.com/jquery.form.js'></script> hooked? - Dmitriy Kondratiuk

HTML

 <form class="form" id="send"> <input name="phone" placeholder="Номер телефона" required autofocus/> <button type="submit">Перезвоните мне</button> <div class="successSend" style="display: none"></div> </form>

JQUERY

 (function () { "use strict"; function _send() { var form = $('#send'), mes = $('.successSend'); form.on('submit', function (e) { e.preventDefault(); $.ajax({ url: 'send.php', method: 'post', data: $(this).serialize(); dataType: 'json', success: function (res) { if (res.type == 'success') { mes.css('display', 'block').text(res.mess); } else { mes.css('display', 'block').text(res.mess) } } }) }); } return { sender: _send() } }())

Php

 if((isset($_POST['phone']) && $_POST['phone'] != "")){ //Проверка отправилось ли наше поля name и не пустые ли они $to = 'test@test.com'; //Почта получателя, через запятую можно указать сколько угодно адресов $subject = 'Обратный звонок'; //Загаловок сообщения $message = ' <html> <head> <title>'.$subject.'</title> </head> <body> <p>Телефон: '.$_POST['phone'].'</p> </body> </html>'; //Текст нащего сообщения можно использовать HTML теги $headers = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма $headers .= "From: Отправитель <test@test.com>\r\n"; //Наименование и почта отправителя $res = mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail if ($res) { return json_encode(['status'=> 'success', 'mess' => 'Сообщение отправлено']); } else { return json_encode(['status'=> 'error', 'mess' => 'Сообщение не удалось отправлено']); } }

I think the idea is clear