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>[email protected]</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 nEmail: $email nMessage: $message";
$recipient = "email.... (removed for privacy)";
$mailheader = "From: $email rn";
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)
2
Answers
You are trying to select an element with the
id
ofstatus
, but in your HTML there’s only an element with theclass
ofstatus
. So either addid="status"
on the element, or change the JavaScript to select by class name instead.Select by class:
Or
You have a
div
, having the class ofstatus
:When you try to set its
innerHTML
, you are searching for an element having theid
ofstatus
, which does not exist in your code:and this throws the error that you have seen. Also, you try to set its
innerText
in a callback:but again, you are searching for an element having an
id
ofstatus
. There are two ways to solve this, you can choose either of those, depending on your preference:Change the tag’s structure to have an id of status:
and then your
id
selectors will find the element and your error will be fixed.Change the id selectors to class selectors
and