working on contact form for my website. All tree form fields are validating correctly somehow the email is not send but looks page is loading again. Can anyone check my code and tell me where could be a problem here. Would like temail to be sent and notification to the user shown.
Contact form:
<form role="form" id="contactForm">
<div class="row">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
</div>
<div class="form-group">
<textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
</div>
</form>
Java sripts within same html file as form:
<script>
$(document).ready(function () {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
})});
</script>
<script>
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
})};
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
</script>
PHP file (process.php) :
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "roger@gth.com.pl";
$Subject = "New Message Received";
// send email
$success = mail($EmailTo, $Subject, $message, $email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
for further dicussion:
my top code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>my site</title>
<link rel="shortcut icon" href="img/ico.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="jakiś wyraz">
<meta name="keywords" content="">
<meta name="author" content="strona">
<!-- Bootstrap Css -->
<link href="bootstrap-assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Style -->
<link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet">
<link href="plugins/Icons/et-line-font/style.css" rel="stylesheet">
<link href="plugins/animate.css/animate.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- Icons Font -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function () {
var owl = $("#owl-hero");
owl.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 1,
paginationSpeed: 400,
singleItem: true,
transitionStyle: "fade"
})});
</script>
<script>
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
</script>
</head>
i notice couple errors in console please help me also to fix it.:
error type: SCRIPT5009: '$' is undefined
on this line:
$("#contactForm").validator().on("submit", function (event) {
error type: SCRIPT5009: '$' is undefined
at the end on own.carousel script here:
});