Topic: Contact Form JS code doesn't work
Hi there,
I am having a problem with contact form validation. I follow every step according to the contact form tutorial but it seems there is something wrong with the JavaScript code and would not allow me to submit the form. Here is the code of my contact page - contact.html
contact.html
<section class="section">
<!--Section heading-->
<h2 class="section-heading h1 pt-4">Contact us</h2>
<!--Section description-->
<p class="section-description">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
matter of hours to help you.</p>
<div class="row">
<!--Grid column-->
<div class="col-md-8 col-xl-9">
<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">
<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">
<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">
<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="center-on-small-only">
<a class="btn btn-primary" onclick="validateForm()">Send</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 col-xl-3">
<ul class="contact-icons">
<li><i class="fa fa-map-marker fa-2x"></i>
<p>San Francisco, CA 94126, USA</p>
</li>
<li><i class="fa fa-phone fa-2x"></i>
<p>+ 01 234 567 89</p>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
<p>contact@mdbootstrap.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Contact v.2-->
JavaScript code in contact.html
<!-- validate form -->
<script>
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(),
'subject' : $('input[name=subject]').val(),
'message' : $('textarea[name=message]').val()
};
$.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);
}
});
document.getElementById('contact-form').submit();
}
</script>
<!-- validate form -->
PHP file
<?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 = "buivietdung1995@gmail.com";
$mailheader = "From: $email rn";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>
After fill out the form and hit 'send', I got this error 2 TypeErrors, to see the error, go to:
gohith.com -> contact -> fill the form then send -> f12 to see the errors
If the code is too difficult to read here, you can go to my github files to see the code better
https://github.com/Wistree/HTTimber/blob/master/index.html
https://github.com/Wistree/HTTimber/blob/master/mail.php
Thank you
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 6 years ago
Do you get any console logs?