1

Всем доброго дня! не получается решить вопрос. Есть форма обратной связи, но при нажатии отправить открывается пустая страница. Вот форма - http://praktikum-dostizhenij.ru/contact.html


Весь код уже с правками

Код выглядит так (1й код из файла js, второй html):

$(document).ready(function(){
    
    (function($) {
        "use strict";

    
    jQuery.validator.addMethod('answercheck', function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value)
    }, "type the correct answer -_-");

    // validate contactForm form
    $(function() {
        $('#contactForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                subject: {
                    required: true,
                    minlength: 4
                },
                number: {
                    required: true,
                    minlength: 5
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true,
                    minlength: 20
                }
            },
            messages: {
                name: {
                    required: "Напишите, пожалуйста, ваше имя",
                    minlength: "Введено слишком мало символов"
                },
                subject: {
                    required: "Напишите, пожалуйста, тему сообщения",
                    minlength: "В вашей теме написано меньше 4 символов"
                },
                number: {
                    required: "Напишите, пожалуйста, ваш номер телефона",
                    minlength: "Номер слишком короткий"
                },
                email: {
                    required: "Напишите, пожалуйста, ваш email"
                },
                message: {
                    required: "Напишите, пожалуйстс, текст сообщения",
                    minlength: "Слишком короткий текст"
                }
            },
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    type:"POST",
                    data: $(form).serialize(),
                    url:"contact_process.php",
                    success: function() {
                        $('#contactForm :input').attr('disabled', 'disabled');
                        $('#contactForm').fadeTo( "slow", 1, function() {
                            $(this).find(':input').attr('disabled', 'disabled');
                            $(this).find('label').css('cursor','default');
                            $('#success').fadeIn()
                            $('.modal').modal('hide');
		                	$('#success').modal('show');
                        })
                    },
                    error: function() {
                        $('#contactForm').fadeTo( "slow", 1, function() {
                            $('#error').fadeIn()
                            $('.modal').modal('hide');
		                	$('#error').modal('show');
                        })
                    }
                })
            }
        })
    })
        
 })(jQuery)
})
   <form
          class="row contact_form"
          action="contact_process.php"
          method="post"
          id="contactForm"
          novalidate="novalidate"
        >
          <div class="col-md-6">
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                id="name"
                name="name"
                placeholder="Ваше имя"
                onfocus="this.placeholder = ''"
                onblur="this.placeholder = 'Ваше имя'"
                required=""
              />
            </div>
            <div class="form-group">
              <input
                type="email"
                class="form-control"
                id="email"
                name="email"
                placeholder="Ваш email"
                onfocus="this.placeholder = ''"
                onblur="this.placeholder = 'Ваш email'"
                required=""
              />
            </div>
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                id="subject"
                name="subject"
                placeholder="Тема сообщения"
                onfocus="this.placeholder = ''"
                onblur="this.placeholder = 'Тема сообщения'"
                required=""
              />
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <textarea
                class="form-control"
                name="message"
                id="message"
                rows="1"
                placeholder="Введите сообщение"
                onfocus="this.placeholder = ''"
                onblur="this.placeholder = 'Введите сообщение'"
                required=""
              ></textarea>
            </div>
          </div>
          <div class="col-md-12 text-right">
            <button type="submit" value="submit" class="btn primary-btn">
              Отправить
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!--================Contact Area =================-->

<!--================Contact Success and Error message Area =================-->
<div id="success" class="modal modal-message fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <i class="ti-close"></i>
        </button>
        <h2>Благодарим!</h2>
        <p>Ваше сообщение успешно отправлено...</p>
      </div>
    </div>
  </div>
</div>

<!-- Modals error -->

<div id="error" class="modal modal-message fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <i class="ti-close"></i>
        </button>
        <h2>Извините!</h2>
        <p>Произошла ошибка. Попробуйте еще раз.</p>
      </div>
    </div>
  </div>
</div>

В php файле contact_process.php (в корневом каталоге)

<?php

$to = "[email protected]";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$subject = $_REQUEST['subject'];
$cmessage = $_REQUEST['message'];

$headers = "From: $from";
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

$csubject = "Сообщение из Академии ПРАКТИКУМ ДОСТИЖЕНИЙ";

$logo = 'http://praktikum-dostizhenij.ru/img/logo.png';
$link = 'http://praktikum-dostizhenij.ru/';

$body = "<!DOCTYPE html><html lang='ru'><head><meta charset='UTF-8'><title>Сообщение</title></head><body>";
$body .= "<table style='width: 100%;'>";
$body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
$body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
$body .= "</td></tr></thead><tbody><tr>";
$body .= "<td style='border:none;'><strong>От кого:</strong> {$name}</td>";
$body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
$body .= "</tr>";
$body .= "<tr><td style='border:none;'><strong>Тема:</strong> {$subject}</td></tr>";
$body .= "<tr><td></td></tr>";
$body .= "<tr><td colspan='2' style='border:none;'>{$cmessage}</td></tr>";
$body .= "</tbody></table>";
$body .= "</body></html>";

$send = mail($to, $csubject, $body, $headers);

?>

файл mail-script.js

    // -------   Mail Send ajax

     $(document).ready(function() {
        var form = $('#myForm'); // contact form
        var submit = $('.submit-btn'); // submit button
        var alert = $('.alert-msg'); // alert div for show alert message

        // form submit event
        form.on('submit', function(e) {
            e.preventDefault(); // prevent default form submit

            $.ajax({
                url: 'mail.php', // form action url
                type: 'POST', // form submit method get/post
                dataType: 'html', // request type html/json/xml
                data: form.serialize(), // serialize form data
                beforeSend: function() {
                    alert.fadeOut();
                    submit.html('Sending....'); // change submit button text
                },
                success: function(data) {
                    alert.html(data).fadeIn(); // fade in response data
                    form.trigger('reset'); // reset form
                    submit.attr("style", "display: none !important");; // reset submit button text
                },
                error: function(e) {
                    console.log(e)
                }
            });
        });
    });
Валидация - jquery.validate.min.js praktikum-dostizhenij.ru/js/jquery.validate.min.js

К сожалению, моих знаний не хватает. Буду очень рада помощи.

7
  • У вас сейчас происходит перенаправление на contact_process.php. Вам надо отменить стандартное событие сабмита. 22 мар 2019 в 5:42
  • Благодарю за ответ. Подскажите, пожалуйста, как это сделать? 22 мар 2019 в 8:51
  • Пожалуйста, добавьте в вопрос информацию о том, какую библиотеку используете для валидации. Ссылка на библиотеку тоже подойдет. 22 мар 2019 в 10:55
  • Нашла - jquery.validate.min.js praktikum-dostizhenij.ru/js/jquery.validate.min.js 22 мар 2019 в 18:36
  • Попробуйте сделать так ` submitHandler: function(form, event) {event.preventDefault(); ...}` 23 мар 2019 в 11:21

1 ответ 1

1

Причина в том, что вы не подключили библиотеку jQuery form. Соответственно функции ajaxSubmit нету.

Подключите вот эту библиотеку

http://jquery.malsup.com/form/

Возможно вот так.

<script src="http://malsup.github.com/jquery.form.js"></script> 
7
  • О, счастье! Стало лучше! Появилось сообщение об отправке и, главное, пришло письмо! Только абра-кадаброй. Благодарю! Подскажите, пожалуйста, где сменить кодировку, чтобы можно было принимать сообщения на русском? Очень благодарна за ответ! 26 мар 2019 в 11:27
  • @Вероника Попробуйте вот здесь charset=ISO-8859-1. Поменять на UTF-8. Спасибо принимается в виде принятого ответа) 26 мар 2019 в 11:35
  • Кусок кода, который я правила до этого, вернула, с ним не приходили сообщения 26 мар 2019 в 12:34
  • @Вероника извините, я не понял ваш комментарий. Не могли бы вы уточнить? 26 мар 2019 в 12:56
  • Благодарю за помощь! У меня было опоздание с приходом сообщений. Никак не могла понять, работает или нет. Всё работает! Благодарю! 26 мар 2019 в 14:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.