Отправить контактную форму без перезагрузки страницы с помощью Ajax - PullRequest
Новая
       31

Отправить контактную форму без перезагрузки страницы с помощью Ajax

0 голосов
/ 17 мая 2018

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

Отправка электронной почты без перезагрузки страницы с использованием AJAX

Это сайт, на котором я пытаюсь заставить его работать: CRANE TECH. NET

Я не очень знаком с php, так что я думаю, что именно здесь я все испортил.

Вот точный код, который я использую:

HTML 

<section class="section">
                        <h2 class="section-heading  text-muted h4 pt-4">Free Consultation</h2>
                        <!--CONTACT DESCRIPTION-->
                        <p class="section-description">Are you ready to turn your vision into a reality? Fill out the contact form below and a member of our team will get back to you as soon as possible. Let's bring your idea to life!</p>
                        <div class="row">
                            <div class="col-12">
                                <form id="contact-form" name="contact-form" action="mail.php" method="POST">
                                    <div class="row">
                                        <!--NAME INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="name" name="name" class="form-control" placeholder="* NAME" required>
                                                <label for="name" class=""></label>
                                            </div>
                                        </div>

                                        <!--EMAIL INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="email" name="email" class="form-control" placeholder="* EMAIL" required>
                                                <label for="email" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!-- PHONE NUMBER INPUT -->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="clientPhone" name="clientPhone" class="form-control" placeholder="PHONE" required>
                                                <label for="phone number" class=""></label>
                                            </div>
                                        </div>

                                        <!--SUBJECT INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="subject" name="subject" class="form-control" placeholder="* SUBJECT" required>
                                                <label for="subject" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!--MESSAGE INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <textarea type="text" id="message" name="message" rows="3" class="form-control md-textarea" placeholder="* MESSAGE" required></textarea>
                                                <label for="message"></label>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                                <!-- SUBMIT BUTTON -->
                                <div class=" col-3 offset-3 offset-md-4 mb-4">
                                    <button class="btn btn-warning" onclick="validateForm()">Send <i class="fa fa-paper-plane ml-1"></i></button>
                                </div>
                                <div id="status" class="text-muted col-12 col-md-8 offset-md-2 my-1"></div>
                            </div>

JS 

function validateForm() {
var name = document.getElementById('name').value;
if (name == "") {
    document.getElementById('status').innerHTML = "Name cannot be empty";
    return false;
}
var email = document.getElementById('email').value;
if (email == "") {
    document.getElementById('status').innerHTML = "Email cannot be empty";
    return false;
} else {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(email)) {
        document.getElementById('status').innerHTML = "Email format invalid";
        return false;
    }
}

var subject = document.getElementById('subject').value;
if (subject == "") {
    document.getElementById('status').innerHTML = "Subject cannot be empty";
    return false;
}
var message = document.getElementById('message').value;
if (message == "") {
    document.getElementById('status').innerHTML = "Message cannot be empty";
    return false;
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
    'name': $('input[name=name]').val(),
    'email': $('input[name=email]').val(),
    'clientPhone': $('input[name=clientPhone]').val(),
    'subject': $('input[name=subject]').val(),
    'message': $('textarea[name=message]').val()

};
document.getElementById('contact-form').submit();

$.ajax({
    url: "mail.php",
    type: "POST",
    data: formData,
    success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message);
        if (data.code) //If mail was sent successfully, reset the form.
            $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        $('#status').text(jqXHR);
    }
});
}

mail.php 

<?php
if(isset( $_POST['name']))
  $name = $_POST['name'];
if(isset( $_POST['email']))
  $email = $_POST['email'];
if(isset( $_POST['clientPhone']))
  $clientPhone = $_POST['clientPhone'];
if(isset( $_POST['subject']))
  $subject = $_POST['subject'];
if(isset( $_POST['message']))
  $message = $_POST['message'];

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
  print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
  exit();
}
if ($email === ''){
  print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
  exit();
} else {
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
  print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
  exit();
  }
}
if ($subject === ''){
  print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
  exit();
}
if ($message === ''){
  print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
  exit();
}

//   if ($name === ''){
//     echo "Name cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($email === ''){
//     echo "Email cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   } else {
//     if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
//       echo "Email format invalid.";
//       echo "<br>";
//       echo "<br>";
//       echo "<a href='index.html'>GO BACK</a>";
//       die();
//     }
//   }
//   if ($subject === ''){
//     echo "Subject cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($message === ''){
//     echo "Message cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }

$content="From: $name \n Email: $email \n Phone #: $clientPhone \n Subject: $subject \n Message: $message";
$recipient = "support@crane-tech.net";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

1 Ответ

0 голосов
/ 17 мая 2018

Основной выпуск

Ваша главная проблема заключается в том, что в php-коде отсутствует точка с запятой (;) и конец строки 15.

Другие вопросы

Ваш веб-сайт использует JQuery Slim, $.ajax не входит в версию Slim, поэтому вы получаете сообщение об ошибке. Чтобы это исправить, просто включите полный JQuery или сделайте ajax без JQuery.

Вы также можете избавиться от этой строки:
document.getElementById('contact-form').submit();
потому что это вызывает перенаправление, когда вы уже вручную отправляете свои данные.

Вы должны удалить эти строки, потому что вы уже установили их: 

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];

Несвязанное примечание:

Если вы уже используете JQuery, вы должны использовать его - вместо этого:
document.getElementById('status')
Вы должны использовать:
$('#status')

...