Привет, как мне заставить эту форму нормально работать: когда вы нажимаете кнопку «Отправить сообщение», в HTML есть только класс оповещения об успехе, поэтому все сообщения становятся зелеными, даже если это сообщение об ошибке. Спасибо
Вот HTML
HTML: это JavaScript
Код (JavaScript):
И это PHP
PHP:
Вот HTML
Код:
<?php if ($_SERVER["REQUEST_METHOD"] == "POST") { # FIX: Replace this email with recipient email $mail_to = "[email protected]"; # Sender Data $subject = trim($_POST["subject"]); $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"]))); $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); $phone = trim($_POST["phone"]); $message = trim($_POST["message"]); if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($phone) OR empty($subject) OR empty($message)) { # Set a 400 (bad request) response code and exit. http_response_code(400); echo "Please complete the form and try again."; exit; } # Mail Content $content = "Имя: $name\n"; $content .= "Email: $email\n\n"; $content .= "Phone: $phone\n"; $content .= "Message:\n$message\n"; # email headers. $headers = "From: $name <$email>"; # Send the email. $success = mail($mail_to, $subject, $content, $headers); if ($success) { # Set a 200 (okay) response code. http_response_code(200); echo "Thank You! Your message has been sent."; } else { # Set a 500 (internal server error) response code. http_response_code(500); echo "Oops! Something went wrong, we couldn't send your message."; } } else { # Not a POST request, set a 403 (forbidden) response code. http_response_code(403); echo "There was a problem with your submission, please try again."; }
?>HTML: это JavaScript
(function ($) { 'use strict'; var form = $('.contact__form'), message = $('.contact__msg'), form_data; // Success function function done_func(response) { message.fadeIn().removeClass('alert-danger').addClass('alert-success'); message.text(response); setTimeout(function () { message.fadeOut(); }, 2000); form.find('input:not([type="submit"]), textarea').val(''); } // fail function function fail_func(data) { message.fadeIn().removeClass('alert-success').addClass('alert-success'); message.text(data.responseText); setTimeout(function () { message.fadeOut(); }, 2000); } form.submit(function (e) { e.preventDefault(); form_data = $(this).serialize(); $.ajax({ type: 'POST', url: form.attr('action'), data: form_data }) .done(done_func) .fail(fail_func); }); })(jQuery);Код (JavaScript):
И это PHP
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0"> <meta http-equiv="X-UA-Compatible" content="т.е.=край"> <title>Ajax Contact Form</title> <link rel="stylesheet" href="[URL='https://wmlogs.com/yti/cj55jc3NodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC80LjAuMC9jc3MvYm9vdHN0cmFwLm1pbip1m']https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css[/URL]"> </head> <body> <!-- ajax contact form --> <section style="margin-top: 50px;"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <h5 class="card-header">Ajax Contact Form</h5> <div class="card-body"> <form class="contact__form" method="post" action="mail.php"> <!-- form message --> <div class="row"> <div class="col-12"> <div class="alert alert-success contact__msg" style="display: none" role="alert"> Your message was sent successfully. </div> </div> </div> <!-- end message --> <!-- form element --> <div class="row"> <div class="col-md-6 form-group"> <input name="name" type="text" class="form-control" placeholder="Имя" required> </div> <div class="col-md-6 form-group"> <input name="email" type="email" class="form-control" placeholder="Электронная почта" required> </div> <div class="col-md-6 form-group"> <input name="phone" type="text" class="form-control" placeholder="Телефон" required> </div> <div class="col-md-6 form-group"> <input name="subject" type="text" class="form-control" placeholder="Предмет" required> </div> <div class="col-12 form-group"> <textarea name="message" class="form-control" rows="3" placeholder="Сообщение" required></textarea> </div> <div class="col-12"> <input name="submit" type="submit" class="btn btn-success" value="Send Message"> </div> </div> <!-- end form element --> </form> </div> </div> </div> </div> </div> </section> <script src="[URL='https://wmlogs.com/yti/agLLganNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMy4yLjEubWluWbu']https://code.jquery.com/jquery-3.2.1.min.js[/URL]"></script> <script src="main.js"></script> </body> </html>PHP:
