Всем привет. Ребят подскажите в чем проблема. При отправке формы страница переходит на новую с надписью success. В письме вообще только текст сообщения, номер в теме письма отображается. Имя вообще не показывается. Пожскажите пожалуйста в чем проблема. Не судите сильно, я только учусь. HTML: <form id="contact" class="row form-transparent" name="form1" method="post" action="send.php"> <div class="col-md-6"> <input type="text" class="form-control" name="name" id="name" placeholder="Имя*" /></div> <div class="col-md-6"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Тема*" /></div> <div class="col-md-6"> <div id="error_email" class="error">Введите email</div> <input type="text" class="form-control" name="email" id="email" placeholder="Email*" /> </div> <div class="col-md-6"> <div id="error_email" class="error">Введите телефон</div> <input type="text" class="form-control" name="phone" id="phone" placeholder="Телефон*" /> </div> <div class="col-md-12"> <div id="error_message" class="error">Введите сообшение</div> <textarea cols="10" rows="10" name="message" id="message" class="form-control" placeholder="Сообщение"></textarea> </div> <div id="mail_success" class="col-md-12 success">Спасибо. Ваше сообщение отправлено.</div> <div id="mail_failed" class="col-md-12 error">Ошибка! Попробуйте снова.</div> <div class="col-md-12"> <p id="btnsubmit"> <input type="submit" id="send" value="ОТПРАВИТЬ" class="btn btn-custom fullwidth" /> </p> </div> </form> Код (Javascript): $(document).ready(function(){ 'use strict'; // use strict mode $("#send").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var email = $("#phone").val(); var message = $("#message").val(); var error = false; if(email.length == 0 || email.indexOf("@") == "-1" || email.indexOf(".") == "-1"){ var error = true; $("#error_email").fadeIn(500); }else{ $("#error_email").fadeOut(500); } if(message.length == 0){ var error = true; $("#error_message").fadeIn(500); }else{ $("#error_message").fadeOut(500); } if(error == false){ $("#send").attr({"disabled" : "true", "value" : "Loading..." }); $.ajax({ type: "POST", url : "/send.php", data: "name=" + name + "phone=" + phone + "&email=" + email + "&subject=" + "You Got Email" + "&message=" + message, success: function(data){ if(data == 'success'){ $("#btnsubmit").remove(); $("#mail_success").fadeIn(500); }else{ $("#mail_failed").html(data).fadeIn(500); $("#send").removeAttr("disabled").attr("value", "send"); } } }); } return false; }); }); PHP: <?php session_start(); $email_to = "info@webexpress.kz"; // change with your email $name = $_POST['name']; $phone = $_POST['phone']; $email = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $headers = "From: $email\r\n"; $headers .= "Reply-To: $email\r\n"; if(mail($email_to, $phone, $subject, $message, $headers)){ echo "success"; } else{ echo "failed"; } ?>
В таком случае лучше сразу взять за правило разбивать код на функциональные кусочки, и тестировать их последовательно, переходя к следующему по мере отладки предыдущего. Разработка - это не столько написание кода, сколько его отладка)) По крайней мере по времени --- Добавлено --- Если код сложный: 1. Пишешь сначала простейший прототип, 2. добиваешься его полной работоспособности, 3. а потом шаг за шагом начинаешь привинчивать сверху к нему нужный функционал. это основа кодирования, а вовсе не знание синтаксиса ))
Спасибо. Но проблема не решилась. После отправки формы, при перезагрузки странице, открывается белая страница с надписью success, мне бы хотелось чтоб после отправки формы, не переходить ни на какие странице
HTML: <form id="contact" class="row form-transparent" name="form1" method="post" action="send.php"> <div class="col-md-6"> <input type="text" class="form-control" name="name" id="name" placeholder="Имя*" /></div> <div class="col-md-6"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Тема*" /></div> <div class="col-md-6"> <div id="error_email" class="error">Введите email</div> <input type="text" class="form-control" name="email" id="email" placeholder="Email*" /> </div> <div class="col-md-6"> <div id="error_email" class="error">Введите телефон</div> <input type="text" class="form-control" name="phone" id="phone" placeholder="Телефон*" /> </div> <div class="col-md-12"> <div id="error_message" class="error">Введите сообшение</div> <textarea cols="10" rows="10" name="message" id="message" class="form-control" placeholder="Сообщение"></textarea> </div> <div id="mail_success" class="col-md-12 success">Спасибо. Ваше сообщение отправлено.</div> <div id="mail_failed" class="col-md-12 error">Ошибка! Попробуйте снова.</div> <div class="col-md-12"> <p id="btnsubmit"> <input type="submit" id="send" value="ОТПРАВИТЬ" class="btn btn-custom fullwidth" /> </p> </div> </form> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function() { $("form[name=form1]").submit(function(e){ e.preventDefault(); let data = $(this).serialize(); console.log(data); }); }); </script>
В HTML: Код (Text): <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "/send.php", data: str, success: function(msg) { if(msg == 'OK') { result = 'Сообщение отправлено'; $("#fields").hide(); } else {result = msg;} $('#note').html(result); } }); alert('Ваш запрос отправлен. Спасибо за обращение!'); document.getElementById("contact").reset(); return false; }); }); </script> В PHP: Код (Text): function a($result) { if (is_array($result)) return array_map('a', $result); else return iconv("utf-8", "windows-1251", $result); } $_POST = a($_POST);
Вот, видите, вы уже учитесь формулировать проблему так, чтобы она была понятна и другим, а не только вам То есть описывать не только фактическую сторону вопроса, но и желаемую)) Артур ответил на ваш вопрос.
Михаил, все работает)) Код (Javascript): event.preventDefault() это стандартный механизм, чтобы отменить действие по умолчанию. он специально для этого и создан)) --- Добавлено --- и его используют везде и всюду, и все работает )
Все таки не срабатывает отправка, вашего примера. Я немного подкорректировал форму, сейчас приходит имя, тема, номер телефона. Но проблему с перезагрузкой так и не получилось решить. То есть, сейчас при отправке формы переход на новую страницу с надписью Сообщение отправлено. сейчас так index.html HTML: <form id="contact" class="row form-transparent" name="form1" method="post" action="send.php"> <div class="col-md-6"> <input type="text" class="form-control" name="name" id="name" placeholder="Имя*" /></div> <div class="col-md-6"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Тема*" /></div> <div class="col-md-6"> <div id="error_email" class="error">Введите email</div> <input type="text" class="form-control" name="email" id="email" placeholder="Email*" /> </div> <div class="col-md-6"> <div id="error_email" class="error">Введите телефон</div> <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Телефон*" /> </div> <div class="col-md-12"> <div id="error_message" class="error">Введите сообшение</div> <textarea cols="10" rows="10" name="message" id="message" class="form-control" placeholder="Сообщение"></textarea> </div> <div id="mail_success" class="col-md-12 success">Спасибо. Ваше сообщение отправлено.</div> <div id="mail_failed" class="col-md-12 error">Ошибка! Попробуйте снова.</div> <div class="col-md-12"> <p id="btnsubmit"> <input type="submit" id="send" value="ОТПРАВИТЬ" class="btn btn-custom fullwidth" /> </p> </div> </form> contact.js Код (Javascript): $(document).ready(function(){ $("#send").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var mobile = $("#mobile").val(); var error = false; if(email.length == 0 || email.indexOf("@") == "-1" || email.indexOf(".") == "-1"){ var error = true; $("#error_email").fadeIn(500); }else{ $("#error_email").fadeOut(500); } if(message.length == 0){ var error = true; $("#error_message").fadeIn(500); }else{ $("#error_message").fadeOut(500); } if(name.length == 0){ var error = true; $("#error_name").fadeIn(500); }else{ $("#error_name").fadeOut(500); } if(error == false){ $("#send").attr({"disabled" : "true", "value" : "Loading..." }); $.ajax({ type: "POST", url : "/send.php", data: "name=" + name + "&email=" + email + "&subject=" + "You Got Email" + "&message=" + message + "&mobile=" + mobile, success: function(data){ if(data == 'success'){ $("#btnsubmit").remove(); $("#mail_success").fadeIn(500); }else{ $("#mail_failed").html(data).fadeIn(500); $("#send").removeAttr("disabled").attr("value", "send"); } } }); } return false; }); }); send.php PHP: <?php session_start(); $name = $_POST['name']; $subject = $_POST['subject']; $sender = $_POST['email']; $sent_message = $_POST['message']; $mobile = $_POST['mobile']; $message = "Name: " . $name . "\r\n" . "Subject: " . $subject . "\r\n" . "Message: " . $sent_message . "\r\n" . "Phone number: " . $mobile; $your_site_name = "www.logistics.webexpress.kz"; $your_email = "webexpress.kz@gmail.com"; // setting header: $header = "MIME-Version: 1.0\r\n"; $header .= "Content-type: text/html; charset=utf-8\r\n"; $header .= "From: {$name} <{$sender}>\r\n"; // to subject message header $result = mail($your_email, "Сообщение с сайта ".$your_site_name, nl2br($message), $header); echo "Ваше сообщение отправлено"; ?>
Мне откровенно лениво разбираться в ваших нагромождениях кода. Вот рабочий (спецом сейчас проверил, и сделал вывод в алерты)))) пример из сети, первый попавшийся. Можете взять за основу и переделать свой код. Код (Javascript): <!DOCTYPE html> <html> <head> <title>Использование jQuery метода preventDefault() объекта Event</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( "a" ).click(function( e ){ // задаем функцию при нажатии на элемент <a> e.preventDefault(); // отменяем действие события по умолчанию //console.log( "anchor click prevented" ); // выводим сообщение в консоль alert('preventDefault таки работает! (-:'); }); $( "form" ).submit(function( e ){ // задаем функцию при отправке формы e.preventDefault(); // отменяем действие события по умолчанию //console.log( "form submit prevented" ); // выводим сообщение в консоль alert('preventDefault таки работает! (-:'); }); }); </script> </head> <body> <a href = "https://www.google.ru">Перейти на сайт Google</a> <form action = "script.php"> <input type = "text"> <input type = "submit" value = "Отправить"> </form> </body> </html>
Добавьте в пхп в конце: Код (Text): $redirect = isset($_SERVER['HTTP_REFERER'])? $_SERVER['HTTP_REFERER']:'redirect-form.html'; header("Location: $redirect"); exit();