so i have a bootstrap 4 contact form set up which is linked to a validateForm()
function which (of course) validates the form and sends it to the mail.php
file.
However, upon entering the details needed and clicking the button to send the email, the form does nothing. I don't know whether the mail.php
file is linked incorrectly or if its just my code.
this site is for an animation studio called Sutori Studios using the 000webhost hosting service as a live preview for them (which includes a system for email handling). I have checked to make sure its all linked together properly but i may have missed something.
<section id="contact" class="anchor">
<!--Section heading-->
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
a matter of hours to help you.</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-primary" onclick="validateForm()">Send</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center">
<ul class="list-unstyled mb-0">
<li><i class="fab fa-youtube fa-2x"></i>
<p>Sutori Studios</p>
</li>
<li><i class="fab fa-twitter mt-4 fa-2x"></i>
<p>@SutoriStudios</p>
</li>
<li><i class="fas fa-envelope mt-4 fa-2x"></i>
<p>SutoriStudios@gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
</div>
</main>
<footer class="page-footer font-small unique-color-dark">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2019 Copyright:
<a href="index.html">Sutori Studios</a>
</div>
<!-- Copyright -->
</footer>
<!--Main layout-->
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/prerequisite/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/prerequisite/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/prerequisite/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/prerequisite/mdb.js"></script>
<script>
function validateForm() {
document.getElementById('status').innerHTML = "Sending...";
formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'subject' : $('input[name=subject]').val(),
'message' : $('textarea[name=message]').val()
};
$.ajax({
url : "../public_html/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);
}
});
}
</script>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$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();
}
$content = "From: $name
Email: $email
Message: $message";
$recipient = "email.... (removed for privacy)";
$mailheader = "From: $email
";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>
I expect to have an email delivered to the my mailbox but nothing gets sent through and i get an error in console stating:
(index):305 Uncaught TypeError: Cannot set property 'innerHTML' of null at validateForm ((index):305) at HTMLAnchorElement.onclick ((index):264)