На под домене http://grace.jak.net.ua/ реализована форма обратной связи. После отправки формы всплывало стандартное браузерное окно, убрала alert. Сейчас после отправления переходит на страницу contacts.php. В РНР чайник-чайников. Подскажите, пожалуйста как сделать всплывающее окно, стили которого можно редактировать, типа "Ваше сообщение получено, спасибо!" Вот код формы: файл отправки contacts.php PHP: <?phpif (isset ($_POST['contactFF'])) { $to = "[email protected]"; // поменять на свой электронный адрес $from = $_POST['contactFF']; $subject = "Anketa " .$_SERVER['HTTP_REFERER']; $message = "1. Ваше имя: ".$_POST['nameFF']."\n2. Сколько лет опыта в данной сфере: ".$_POST['ageFF']."\n3. На каких из этих сайтов вы работали: " ."\n+ ".$_POST['siteFF1'] ."\n+ ".$_POST['siteFF2'] ."\n+ ".$_POST['siteFF3'] ."\n+ ".$_POST['siteFF4'] ."\n+ ".$_POST['siteFF5'] ."\n+ ".$_POST['siteFF6']."\nДругой, укажите: ".$_POST['site'] ."\n4. Телефон, по которому с вами можно связаться: ".$_POST['phoneFF']."\n5. Укажите ваш город проживания: ".$_POST['cityFF']."\n6. Почему мы должны предпочесть вашу кандидатуру: ".$_POST['reasonFF']."\n7.Email: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']; $boundary = md5(date('r', time())); $filesize = ''; $headers = "MIME-Version: 1.0\r\n"; $headers .= "From: " . $from . "\r\n"; $headers .= "Reply-To: " . $from . "\r\n"; $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n"; $message="Content-Type: multipart/mixed; boundary=\"$boundary\"--$boundaryContent-Type: text/plain; charset=\"utf-8\"Content-Transfer-Encoding: 7bit$message"; for($i=0;$i<count($_FILES['fileFF']['name']);$i++) { if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) { $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i]))); $filename = $_FILES['fileFF']['name'][$i]; $filetype = $_FILES['fileFF']['type'][$i]; $filesize += $_FILES['fileFF']['size'][$i]; $message.="--$boundaryContent-Type: \"$filetype\"; name=\"$filename\"Content-Transfer-Encoding: base64Content-Disposition: attachment; filename=\"$filename\"$attachment"; } } $message.="--$boundary--"; if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ mail($to, $subject, $message, $headers); echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!'; // $(window).load(function() {// $(".window").fadeIn(400);// }); } else { echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.'; }}?> HTML: <div id="forma"> <div class="wrap3"> <h3>Форма обратной связи</h3><br /> <h4>Если вы готовы к сотрудничеству с нашей командой, просим Вас заполнить <br /> предлагаемую форму ниже и наши менеджеры свяжутся с вами в кротчайшие сроки. </h4> <table class="form"> <form method="post" id="feedback-form" action="contacts.php"> <tr> <td> <label for="nameFF"><p class="pp">1. Ваше имя:</p></label><br /> <input type="text" name="nameFF" id="nameFF" required x-autocompletetype="name" class="w100"> <br /><br /></td> </tr> <tr> <td><label for="ageFF"><p class="pp">2. Сколько лет опыта в данной сфере:</p></label><br /> <input name="ageFF" type="radio" required value="1 год" /><span class="text-g">1 год</span> <input name="ageFF" type="radio" required value="2 года" /><span class="text-g">2 года</span> <input name="ageFF" type="radio" required value="3 года и более" /><span class="text-g">3 года и более</span> </td> </tr> <tr> <td><label for="siteFF"><p class="pp"><br />3. На каких из этих сайтов вы работали:</p></label><br /> <input name="siteFF1" type="radio" value="Dream Marriage" /><span class="text-g">Dream Marriage</span> <input name="siteFF2" type="radio" value="Natasha Club" /><span class="text-g">Natasha Club</span> <input name="siteFF3" type="radio" value="Charmdate" /><span class="text-g">Charmdate</span> <input name="siteFF4" type="radio" value="Anastasia" /><span class="text-g">Anastasia</span> <input name="siteFF5" type="radio" value="Все" /><span class="text-g">Все</span> <input name="siteFF6" type="radio" value="Другой" /><span class="text-g">Другой, укажите:</span><br /> <input type="text" name="site" id="site" required placeholder="" class="w100"> </td> </tr> <tr> <td><br /><label for="phoneFF"><p class="pp">4. Телефон, по которому с вами можно связаться:</p></label><br /> <input type="text" name="phoneFF" id="rostFF" required placeholder="" class="w100"><br /><br /></td> </tr> <tr> <td><label for="cityFF"><p class="pp">5. Укажите ваш город проживания:</p></label><br /> <input type="text" name="cityFF" id="cityFF" required x-autocompletetype="name" class="w100"><br /><br /></td> </tr> <tr> <td><label for="reasonFF"><p class="pp">6. Почему мы должны предпочесть вашу кандидатуру:</p></label><br /> <input type="text" name="reasonFF" id="hairFF" required x-autocompletetype="name" class="w100"><br /><br /></td> </tr> <tr> <td> <label for="contactFF"><p class="pp">7. Ваш Email:</p></label><br /> <input type="email" name="contactFF" id="contactFF" required placeholder="" x-autocompletetype="email" class="w100"> <br /><br /></td> </tr> <br /> </table><br /> <input value="ОТПРАВИТЬ АНКЕТУ" type="submit" id="submitFF"> </form> <br /><br /> <br /><br /> <div class="clear"></div> </div> </div> </div> <div id="footer"><p class="foot-t">Не стремитесь, чтобы было легче, стремитесь, чтобы было лучше.</p></div> <script> document.getElementById('feedback-form').addEventListener('submit', function(evt){ var http = new XMLHttpRequest(), f = this; evt.preventDefault(); http.open("POST", "contacts.php", true); http.onreadystatechange = function() { $(".window").fadeIn(400); } } http.onerror = function() { alert('Извините, данные не были переданы'); } http.send(new FormData(f)); }, false); </script>
Написать ajax на contact.php Где в пост не будет указан action Код: <script> function contacForm(){ var email = $('#email').val(); var phone= $('#phone').val(); $.ajax({ type: 'POST', url: '/contact.php', data:{ email:email, phone:phone, }, dataType: "json", success: function(data){ if (json['success']) { console.log(data); $('#pop-up').html('<div class="success" style="display: none;">' + json['success'] + '<img src="/image/close.png" alt="" class="close" /></div>'); // Здесь поздравление } }, error: function(data){ console.log(data); // Здесь выводим ошибку запроса } }); } </script>
