Я работаю над контактной формой php для моей страницы, где после нажатия кнопки отправки и (!) Почта была отправлена, я хотел бы заменить содержимое HTML. До сих пор я мог бы управлять тем, что после .btn HTML заменяется, но это происходит до того, как произойдет какая-либо проверка, и будет отправлена почта. Можете ли вы показать мне способ сделать это, пожалуйста? Большое спасибо!
$(document).ready(function() { var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; $('.btn').click(function(){ $('.form').html('').append(newHTML); }); });
.contact-form { margin-top:30px; margin-bottom:70px; } .contact-form h1 { margin-bottom:70px; } .contact-form input { width:70%; margin:10px auto 20px auto; } .message textarea { max-width:80%; width:80%; margin:10px auto 20px auto; height:100px; } .contact-form .btn { background-color:#6f8595; color:white; transition:0.3s; width:50%; } .contact-form .btn:hover { background-color:white; color:#6f8595; transition:0.3s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <form class="form clearfix" action="index.php" method="post"> <div class="col-sm-6"> <p>Name:</p> <input type="text" name="name" placeholder="Your full name here" required> <p>Email:</p> <input type="email" name="email" placeholder="Your email here" required> </div> <div class="col-sm-6"> <p>Message:</p> <div class="message"><textarea name="message">Hello YourSite, </textarea></div> <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div> </div> </form>
Для этого вам понадобится Ajax.
сначала нам нужен contact.php, который выполнит задание и вернет ответ, чтобы сообщить клиенту, отправлено ли электронное письмо или нет. например:
contact.php
<?php if (mail('caffeinated@example.com', 'My Subject', 'message')) { echo json_encode(['error' => false]); } else { echo json_encode(['error' => true]); }
Затем в вашем клиенте вам необходимо выполнить ajax-запрос на contact.php и обновить dom в зависимости от ответа на запрос:
client.html
<script> $(document).ready(function() { var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; $('.btn').click(function(){ $.post('contact.php', $('.form').serialize(), function () { if (data.error == false) { $('.form').html('').append(newHTML); } }) }); }); </script> <form class="form clearfix"> <div class="col-sm-6"> <p>Name:</p> <input type="text" name="name" placeholder="Your full name here" required> <p>Email:</p> <input type="email" name="email" placeholder="Your email here" required> </div> <div class="col-sm-6"> <p>Message:</p> <div class="message"><textarea name="message">Hello YourSite, </textarea></div> <div><input class="btn" type="submit" name="btn-submit" value="Send message!" required/></div> </div> </form>
Вы должны проверить, действительна ли ваша форма, прежде чем скрывать форму. Попробуйте что-то подобное с помощью valid() :
$('.btn').click(function(){ if($('.form').valid()) $('.form').html('').append(newHTML); });