@del993788

Как прикрутить ajax?

Здравствуйте. После двухнедельного искания формы с отправкой нескольких файлов на почту без перезагрузки, я её всё таки нашел. Но вот осталась одна проблема, как сюда добавить ajax? Посмотрите пожалуйста на код:
<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>

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() {
    if (http.readyState == 4 && http.status == 200) {
      alert(httfp.responseText);
      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
        f.messageFF.removeAttribute('value');
        f.messageFF.value='';
      }
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
  http.send(new FormData(f));
}, false);


<?php
if (isset ($_POST['contactFF'])) {
  $to = "@gmail.com"; // поменять на свой электронный адрес
  $from = $_POST['contactFF'];
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
  $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\"

--$boundary
Content-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.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
     }
   }
   $message.="
--$boundary--";

  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>


Я знаю, что по средствам ajax можно сделать то что я хочу, но увы знаний у меня не хватает... В конце я хочу получить такой вид: человек нажимает на кнопку "отправить" и появляется анимация загрузки и потом выводится результат. либо положительный, либо отрицательный.

Пока что есть такой код.
$("#feedback-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contacts.php",
data: str,
success: function(msg) {
if(msg == 'ok') {
 $(".result").toggleClass("dis"); return false;
}
else {
 $(".notresult").toggleClass("dis"); return false;
}
}
});
return false;
});


Но он, как вы понимаете, не получает msg == 'ok' . А как его передать - я не знаю. Письма уходят, но только почему то без файлов... Подскажите, как ему передать msg == 'ok' и не терять функцию отправки файлов?

P.S. Еще остаётся вопрос, как добавить анимацию загрузки? В какую строчку его засунуть ?
  • Вопрос задан
  • 496 просмотров
Пригласить эксперта
Ответы на вопрос 2
@IceJOKER
Web/Android developer
Ответ на все ваши вопросы - Услуги фрилансера, готовьте $$

Это сайт, где задают конкретный вопрос, а не просят за вас что-то делать! Для этого дела заказываете услуги программиста за $$ или обращаетесь на форму, или сами учите!
Ответ написан
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Используйте https://github.com/PHPMailer/PHPMailer для отправки.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы