@AlohaAlohaAloha

Отправка формы посредством AJAX и PHP?

Доброго времени суток.
Уверен, сто раз спрашивали наверное по данной теме. Но проблема вот в чем.
После отправки, на указанный email приходит уведомление, но только не с заполненными полями. Они просто напросто пустые.
Просмотрите пожалуйста, что может быть не так?

Заранее благодарен.
PS- файлы лежат в папках таким образом - .js в папке js, а .php в папке php.

<div class="b-form-wrap">
            <p id="validation-fail-msg">Please, fill in the missing fields.</p>
            <form novalidate id="feedback-form">
              <div class="b-form-box">
                <p class="form-box__text form-box__text_no-pad">What's your name?<sup class="form-box__sup">*</sup></p>
                <input type="text" name="name" maxlength="30" required id="name-input" class="form-box__input-field">
                <p class="form-box__text">What's your phone number?<sup class="form-box__sup">*</sup></p>
                <input type="text" name="phone" maxlength="30" required id="phone-input" class="form-box__input-field">
                <p class="form-box__text">What's your email?<sup class="form-box__sup">*</sup></p>
                <input type="text" name="email" maxlength="50" required id="email-input" class="form-box__input-field">
              </div>
              <div class="b-form-box b-form-box_left-mrg">
                <p class="form-box__text form-box__text_no-pad">How can I help you?</p>
                <textarea name="text" class="form-box__input-field form-box__input-field_textarea"></textarea>
              </div>
              <button class="form-box__button">Beautify me</button>
              <p id="validation-success-msg">Thanx, I'll contact you very soon.</p>
            </form>
          </div>


$(document).ready(function(){
  $(".form-box__button").click(function(e){
    e.preventDefault();
    if (feedback_validate()){
    	$.ajax({
     	 	type: "POST",
      	url: "php/feedback.php",
      	data: $(this).serialize()
   		}).done(function() {
      		$(this).find("input").val("");
      		$('#validation-success-msg').show('fast');
      		$("html, body").animate({
        		scrollTop: $(document).height()
      		}, "slow");
      $("#feedback-form").trigger("reset");
    });
    }
  });
});

function feedback_validate() {
  var result = true;
  var f_names = ["#name-input", "#email-input", "#phone-input"];
  var el;

  f_names.forEach(function(item) {
      el = $(item);
      if (el.val() == "") {
        result = false;
        el.addClass("validation-error");
      } else {
        el.removeClass("validation-error");
      }
  });

  if (result) {
    $("#validation-fail-msg").hide();
  } else {
    $("#validation-fail-msg").show();

    $('html, body').animate({
        scrollTop: $("#validation-fail-msg").offset().top
    }, 1000);

  }

	return result;
}


<?php

$recepient = "email here";
$sitename = "site here";

$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$email = trim($_POST["email"]);
$text = trim($_POST["text"]);
$message = "Name: $name \nPhone number: $phone \nEmail: $email \nText: $text";

$pagetitle = "Hey Alina, a new submission from \"$sitename\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
  • Вопрос задан
  • 541 просмотр
Решения вопроса 2
thewind
@thewind
php программист, front / backend developer
Так вы сериализуете не форму, а кнопку
Ответ написан
copist
@copist
Empower people to give
1. зачем <button> ? если не требуется сложное оформление (button разрешает использовать html для надписи, например <button><h1>Send me</h1></button>) то можно простой <input type="submit">
2. привязать функцию-обработчик на submit формы, а не на click кнопки
3. сериализовать форму, а не кнопку
4. при отправке письма лучше указывать ReplyTo, чтобы можно было ответить сразу пользователю

Исправленный gist с указаниями всех замечаний https://gist.github.com/pvolyntsev/b1ce3d17c5fad20bffe3
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы