Php and Ajax email form - javascript

i am totally new to ajax and just started getting a hang of php. So i got a ajax and php email code online that seemed to work on the first try and next few days suddenly kept returning with the error message which is "something went wrong". Please i'd appreciate if i could be put through on the source of this and how i could fix it. Thanks much
JS
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var msg_subject = $("#msg_subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contactForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Full Name" name="name" data-error="Please input your full name" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Your Email" name="name" data-error="Please input your email" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Your Message" rows="8" data-error="Write your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-button text-center">
<button class="btn btn-common" id="submit" type="submit">Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
PHP
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
if (empty($_POST["msg_subject"])) {
$errorMSG .= "Subject is required ";
} else {
$msg_subject = $_POST["msg_subject"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "name#email.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Subject: ";
$Body .= $msg_subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :("; //-->this is the error i get
} else {
echo $errorMSG;
}
}
?>

your logic is backwards, in your code an empty $errorMSG is good.
if($errorMSG != ""){ // if NOT empty
echo "Something went wrong: ".$errorMSG;
}else{
//good
}

Related

Sending mail doesn't work, how do i solve this?

I am currently facing an issue and I am unable to understand the error. I have been trying to resolve it for some time now but I am unable to figure out what is causing the problem. I have been looking online for solutions but I have not been able to find any that have worked for me. I am now reaching out for help online in hopes that someone can assist me in understanding and resolving the error. Any help would be greatly appreciated.
I am trying to send an email through JavaScript and PHP and it gives the following error:
'mobile is required Message is required'
Here is my PHP code:
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
//mobile
if (empty($_POST["mobile"])) {
$errorMSG = "mobile is required ";
} else {
$mobile = $_POST["mobile"];
}
//Design type
if (empty($_POST["Dtype"])) {
$errorMSG = "Design Type is required ";
} else {
$Dtype = $_POST["Dtype"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
// replace email to get from date
$EmailTo = "mail#mail.com";
$EmailTo1 = "mail#mail.com";
$Subject = "New Enquery On _____";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "mobile: ";
$Body .= $mobile;
$Body .= "\n";
$Body .= "Design Type: ";
$Body .= $Dtype;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
$success = mail($EmailTo1, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>`
I also have the script here:
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
event.preventDefault();
submitForm();
}
});
function submitForm() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var mobile = $("#mobile").val();
var Dtype = $("#Dtype").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message + "&mobile=" + mobile + "&Dtype=" + Dtype,
success: function (text) {
if (text == "success") {
formSuccess();
} else {
formError();
submitMSG(false, text);
}
}
});
}
function formSuccess() {
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError() {
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass();
});
}
function submitMSG(valid, msg) {
if (valid) {
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
$('#msgSubmit').delay(2000).hide(0);
}
Also the important part of the form here:
<form id="contactForm" data-toggle="validator" class="shake" action="php/form-process.php" method="post">
<div class="row">
<div class="fieldsets col-sm-12">
<input type="text" id="name" placeholder="Enter name" required data-error="Please fill Out">
<div class="help-block with-errors"></div>
</div>
<div class="fieldsets col-sm-12">
<input type="email" id="email" placeholder="Enter email" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="fieldsets col-sm-12">
<input type="text" id="mobile" placeholder="Enter mobile" required data-error="Please fill Out">
<div class="help-block with-errors"></div>
</div>
<div class="fieldsets col-sm-12">
<select name="Dtype" id="Dtype" required>
<option value="">Select Requirement</option>
<option value="2BHK+2T">2BHK +2T</option>
<option value="3BHK+2T">3BHK +2T</option>
<option value="3BHK+3T">3BHK + 3T</option>
<option value="3BHK+3T+POOJA">3BHK + 3T +POOJA</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="fieldsets">
<textarea id="message" rows="4" placeholder="Enter your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="form-submit" class="btn lnk btn-main bg-btn">Submit <span class="circle"></span></button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
<p class="trm"><i class="fas fa-lock"></i>We hate spam, and we respect your privacy.</p>
</form>
I have tried to completely re-write my php script, my form and everything. I just can't seem to figure it out and it got me stressed so badly :(

Send Form data in Email using PHP without refreshing the page

I have a contact section in my website. I want when a user submit the form all the data should be sent in email plus the page don't reload.
My form:
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" id="name" >
</div>
<div class="form-group">
<label for="email">E-Mail:</label>
<input type="email" class="form-control" name="email" id="email" >
</div>
<div class="form-group">
<label for="mobile">Mobile Number:</label>
<input type="text" class="form-control" name="mobile" id="mobile">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" rows="5" name="message" id="message"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary" style="width: 100%" name="form_submit">Send Message</button>
Javascript
$(document).ready(function(){
$('#send').click(function(){
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var message = $('#message').val();
var varData = 'name=' + name + '&email=' + email + '&mobile=' + mobile + '&message=' + message;
$.ajax({
type: 'POST',
url: 'process.php',
data: varData,
success: function() {
alert("message sent");
}
});
});
});
</script>
Process.php
if (isset( $_POST['form_submit'] ) ) {
// Do processing here.
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$message = $_POST['message'];
if ($name == '' || $email == '' || $mobile=='' || $message=='')
{
echo "<script> alert('please fill the field');
</script>";
exit;
}
elseif ($_POST["email"]<>'') {
$ToEmail = 'email#gmail.com';
$EmailSubject = 'Website Contact form';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["name"]."<br><br>";
$MESSAGE_BODY .= "email: ".$_POST["email"]."<br>";
$MESSAGE_BODY .= "mobile: ".nl2br($_POST["mobile"])."<br>";
$MESSAGE_BODY .= "message: ".nl2br($_POST["message"])."";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
echo "<script> alert('mail sent')
</script>";
exit;
} else{
echo "<script> alert ('there is some problem');</script>";
};
}
?>
The problem is the form is not using the code mentioned in "process.php"
How can I ensure the form data is sent in email? I have searched the previous answers but couldn't fix this.

PHP Contact Form Won't Submit Properly

I got my simple PHP contact form working on my website over at
http://www.colin-grant.ca/speedvale
but when I migrated my contact form to http://www.speedvale.com, it gives me the error 'something went wrong :('.
I have posted my code below for you to see, any help would be great - as I'm not the best at PHP.
HTML
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<div class="row">
<div class="col-sm-12 col-sm-offset-3">
<div class="well">
<h1>Contact Us</h1>
<p class="text-center">We are always interested in hearing about how we can improve your visit. If you need more information regarding our packages, or if you wish to set up a detailing appointment, toss us a message below and we will get back to you ASAP.</p>
<hr>
<form role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group col-sm-6">
<label for="fname" class="h4">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="Please enter your First Name" required data-error="Please Enter First Name">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="lname" class="h4">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Please enter your Last Name" required data-error="Please Enter Last Name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="text" class="form-control" id="email" placeholder="Whats your e-mail?" required data-error="Please enter email">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="phone" class="p">Phone</label>
<input type="text" class="form-control" id="phone" placeholder="Whats your phone number?" required data-error="Please enter Phone Number">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<label for="email" class="h4">Service</label>
<select class="form-control" id="service" placeholder="Service"name="services">
<option value="" selected disabled>Please choose a service</option>
<option value="Gold Package ($79.99 / $99.99)">Gold Package ($79.99 / $99.99)</option>
<option value="Platinum 1 Package ($144.99 / $174.99)">Platinum 1 Package ($144.99 / $174.99)</option>
<option value="Platinum 2 Package ($199.99 / $229.99)">Platinum 2 Package ($199.99 / $229.99) </option>
<option value="VIP Package ($329.99 / $359.99)">VIP Package ($329.99 / $359.99)</option>
<option value="Express Package ($29.99 / $39.99)">Express Package ($29.99 / $39.99)</option>
<option value="Interior Package ($119.99 / $139.99)">Interior Package ($119.99 / $139.99)</option>
<option value="Exterior Package ($84.99 / $134.99)">Exterior Package ($84.99 / $134.99)</option>
<option value="Additional Services">Additional Services</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="message" class="p ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Please leave details here about the make and model of your car, and any additional information we can use to make your apppointment or request better! Thank you" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button style="width:100%; padding: 10px; margin-bottom: 20px;" type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<p class="text-center" style="font-size: 14px;">Please do your best to fill out the form below with as much information as possible so we can get started right away on your inquiry!</p>
<p class="text-center" style="font-size:14px;">Thank you from all of us here at Speedvale Auto Detailing.</p>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
PHP
<?php
$errorMSG = "";
// FIRST NAME
if (empty($_POST["fname"])) {
$errorMSG = "First Name is required ";
} else {
$fname = $_POST["fname"];
}
// LAST NAME
if (empty($_POST["lname"])) {
$errorMSG = "Last Name is required ";
} else {
$lname = $_POST["lname"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// PHONE
if (empty($_POST["phone"])) {
$errorMSG .= "Phone Number is required ";
} else {
$phone = $_POST["phone"];
}
// SERVICE
if (empty($_POST["service"])) {
$errorMSG .= "Service Choice is required ";
} else {
$service = $_POST["service"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "myemail#gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body .= "First Name: ";
$Body .= $fname;
$Body .= "\n";
$Body .= "Last Name: ";
$Body .= $lname;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
$Body .= "Service: ";
$Body .= $service;
$Body .= "\n";
$Body .= "Message ";
$Body .= "\n";
$Body .= $message;
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
JAVASCRIPT
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var phone = $("#phone").val();
var service = $("#service").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "fname=" + fname + "&lname=" + lname + "&phone=" + phone + "&email=" + email + "&service=" + service + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
Anyone who can help with this would be great, its the last piece of the website I need to get done.
Thanks a bunch!
As output is coming as "Something went wrong :(" so as per your code i.e
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
the mail is not been sent and you are getting false in $success i.e while sending mail. Also the else condition can be improve:
if(!empty($errorMSG)){
echo "Something went wrong, error: " . $errorMSG;
} else {
echo "Mail not sent";
}

Submit Contact Form w/o Reloading Page Using Ajax

I am following a guide to build a bootstrap contact form and submit it through mail.php without having to reload the page using ajax. I am able to get the form to work up until I try implementing ajax. I get stuck because the instructions arent clear as to which code exactly needs to be replaced and where the new code is supposed to go. Here is a link to the guide I am following and the section I am stuck at:
Sending email without reloading page using AJAX
This is the site I am trying to get it to work on: CRANE TECH. NET
I am not so familiar with php so I'm thinking that is where I am messing it up at.
Here is the exact code I am using:
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();
?>
Main Issue
You main issue is that there is a missing semcolon (;) and the end of line 15 in the php code.
Other Issues
Your website is using JQuery Slim, $.ajax is not included in the slim version so you are getting an error due to that. To fix this just include the full JQuery or do the ajax without JQuery.
You may also want to get rid of this line:
document.getElementById('contact-form').submit();
because it is causing a redirect when you are already manually submitting your data.
You should remove these lines because you have already set them:
$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
Unrelated note:
If you are already using JQuery, you should be using it - instead of doing this:
document.getElementById('status')
You should be using:
$('#status')

Contact form - submit button not working

I'm following this extensive article (with sources) to make a contact form on a website. However, I need a slightly more complex form, with more fields and also a radio buttons group.
I simply added to the process.php and scripts.js files the additional fields I needed. Amongst the many errors I could get, the submit button simply doesn't work at all. I click on it and nothing happens. I'm a newbie in PHP and JS, so I don't know a proper way how to debug and understand where the problem is. Could you help me find it?
Here's my code:
EDIT:
This part actually doesn't work, because I get an empty field in the string yielded. Any idea? These are the non-required fields:
// ASCENSORI CONDOMINIO
if (empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = "Valore non specificato";
} else {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
}
// SCALE CONDOMINIO
if (empty($_POST["scaleCondominio"])) {
$scaleCondominio = "Valore non specificato";
} else {
$scaleCondominio = $_POST["scaleCondominio"];
}
// RISCALDAMENTO CONDOMINIO
if (empty($_POST["riscaldamento"])) {
$riscaldamento = "Valore non specificato";
} else {
$riscaldamento = $_POST["riscaldamento"];
}
HTML:
<!----------------------------- FORM CONDOMINI ---------------------------------------->
<form action="php/process.php" role="form" id="condominiForm" data-toggle="validator" class="col-xs-12 shake">
<div class="row">
<h3 class="col-xs-12">Referente</h3>
<div class="form-group col-sm-6">
<label for="name" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="name" placeholder="Inserisci nome" required data-error="Inserire nome">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="cognome" class="h4 obbligatorio">Cognome</label>
<input type="text" class="form-control" id="cognome" placeholder="Inserisci cognome" required data-error="Inserire cognome">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="email" class="h4 obbligatorio">Email</label>
<input type="email" class="form-control" id="email" placeholder="Inserisci email" required data-error="Inserire email">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="telefono" class="h4 obbligatorio">Telefono/Cellulare</label>
<input type="text" class="form-control" id="telefono" placeholder="Inserisci recapito telefonico" required data-error="Inserire recapito telefonico">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Condominio</h3>
</div>
<div class="form-group col-sm-6">
<label for="nomeCondominio" class="h4 obbligatorio">Nome</label>
<input type="text" class="form-control" id="nomeCondominio" placeholder="Inserisci nome condominio" required data-error="Inserire nome condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="indirizzoCondominio" class="h4 obbligatorio">Indirizzo</label>
<input type="text" class="form-control" id="indirizzoCondominio" placeholder="Inserisci indirizzo" required data-error="Inserire indirizzo condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="comuneCondominio" class="h4 obbligatorio">Comune</label>
<input type="text" class="form-control" id="comuneCondominio" placeholder="Inserisci comune" required data-error="Inserire comune condominio">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="provinciaCondominio" class="h4 obbligatorio">Provincia</label>
<input type="text" class="form-control" id="provinciaCondominio" placeholder="Inserisci provincia" required data-error="Inserire provincia condominio">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="unitaCondominio" class="h4 obbligatorio">Numero unità</label>
<input type="text" class="form-control" id="unitaCondominio" placeholder="Inserisci numero unità" required data-error="Inserire numero unità">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="ascensoriCondominio" class="h4">Numero ascensori</label>
<input type="text" class="form-control" id="ascensoriCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="scaleCondominio" class="h4">Numero scale</label>
<input type="text" class="form-control" id="scaleCondominio" placeholder="Inserisci numero scale" data-error="Inserire numero scale">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<!--<label for="riscaldamentoCondominio" class="h4">Riscaldamento centralizzato</label>-->
<!--<input type="text" class="form-control" id="riscaldamentoCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">-->
<h4>Riscaldamento centralizzato</h4>
<label class="radio-inline"><input type="radio" name="riscaldamento">Sì</label>
<label class="radio-inline"><input type="radio" name="riscaldamento">No</label>
<!--<div class="help-block with-errors"></div>-->
</div>
</div>
<!--<button type="submit" id="form-submit" class="pulsante">Invia richiesta di preventivo!</button>-->
<!--<div class="col-sm-10 col-sm-offset-1">-->
<!--</div>-->
<input type="submit" id="form-submit" class="btn btn-success btn-lg pull-right">Submit</input>
<div id="msgSubmitCondomini" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
JS:
$("#condominiForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Hai completato correttamente i campi?");
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var cognome = $("#cognome").val();
var email = $("#email").val();
var telefono = $("#telefono").val();
var nomeCondominio = $("#nomeCondominio").val();
var indirizzoCondominio = $("#indirizzoCondominio").val();
var comuneCondominio = $("#comuneCondominio").val();
var provinciaCondominio = $("#provinciaCondominio").val();
var unitaCondominio = $("#unitaCondominio").val();
var ascensoriCondominio = $("#ascensoriCondominio").val();
var scaleCondominio = $("#scaleCondominio").val();
var riscaldamento = $("input[name=riscaldamento]:checked").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&cognome=" + cognome + "&email=" + email + "&telefono=" + telefono + "&nomeCondominio=" + nomeCondominio + "&indirizzoCondominio=" + indirizzoCondominio + "&comuneCondominio=" + comuneCondominio + "&provinciaCondominio=" + provinciaCondominio + "&unitaCondominio=" + unitaCondominio + "&ascensoriCondominio=" + ascensoriCondominio + "&scaleCondominio=" + scaleCondominio + "&riscaldamento=" + riscaldamento,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#condominiForm")[0].reset();
submitMSG(true, "Messaggio inviato!")
}
function formError(){
$("#condominiForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmitCondomini").removeClass().addClass(msgClasses).text(msg);
}
PHP
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// COGNOME
if (empty($_POST["cognome"])) {
$errorMSG .= "Cognome is required ";
} else {
$cognome = $_POST["cognome"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// TELEFONO
if (empty($_POST["telefono"])) {
$errorMSG .= "Telefono is required ";
} else {
$telefono = $_POST["telefono"];
}
// NOME CONDOMINIO
if (empty($_POST["nomeCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$nomeCondominio = $_POST["nomeCondominio"];
}
// INDIRIZZO CONDOMINIO
if (empty($_POST["indirizzoCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$indirizzoCondominio = $_POST["indirizzoCondominio"];
}
// COMUNE CONDOMINIO
if (empty($_POST["comuneCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$comuneCondominio = $_POST["comuneCondominio"];
}
// PROVINCIA CONDOMINIO
if (empty($_POST["provinciaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$provinciaCondominio = $_POST["provinciaCondominio"];
}
// UNITA CONDOMINIO
if (empty($_POST["unitaCondominio"])) {
$errorMSG .= "Message is required ";
} else {
$unitaCondominio = $_POST["unitaCondominio"];
}
// ASCENSORI CONDOMINIO
if (!empty($_POST["ascensoriCondominio"])) {
$ascensoriCondominio = $_POST["ascensoriCondominio"];
} else {
$ascensoriCondominio = "Valore non specificato";
}
// SCALE CONDOMINIO
if (!empty($_POST["scaleCondominio"])) {
$scaleCondominio = $_POST["scaleCondominio"];
} else {
$scaleCondominio = "Valore non specificato";
}
// RISCALDAMENTO CONDOMINIO
if (!empty($_POST["riscaldamento"])) {
$riscaldamento = $_POST["riscaldamento"];
} else {
$riscaldamento = "Valore non specificato";
}
$EmailTo = "alessandrocpr#gmail.com";
$Subject = "Nuova contatto da sito Abacond";
// prepare email body text
$Body = "REFERENTE";
$Body .= "\n";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Cognome: ";
$Body .= $cognome;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Telefono: ";
$Body .= $telefono;
$Body .= "\n";
$Body .= "\n";
$Body .= "CONDOMINIO";
$Body .= "\n";
$Body .= "\n";
$Body .= "Nome: ";
$Body .= $nomeCondominio;
$Body .= "\n";
$Body .= "Indirizzo: ";
$Body .= $indirizzoCondominio;
$Body .= "\n";
$Body .= "Comune: ";
$Body .= $comuneCondominio;
$Body .= "\n";
$Body .= "Provincia: ";
$Body .= $provinciaCondominio;
$Body .= "\n";
$Body .= "Numero unità: ";
$Body .= $unitaCondominio;
$Body .= "\n";
$Body .= "Numero ascensori: ";
$Body .= $ascensoriCondominio;
$Body .= "\n";
$Body .= "Numero scale: ";
$Body .= $scaleCondominio;
$Body .= "\n";
$Body .= "Riscaldamento centralizzato: ";
$Body .= $riscaldamento;
$Body .= "\n";
var_dump($Body);
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Qualcosa è andato storto :(";
} else {
echo $errorMSG;
}
}
?>
Your form action is php/process.php and your ajax call is php/process.php. When you click the submit button the JS event for the form is triggered but doesn't render an alternate page and override the form action of the html. I'd suggest simplifying the steps of the interaction of the components to understand them better before trying to master the complexity of what you have here.
I reproduced your code in localhost and all works fine if delete the validator() function:
$("#condominiForm").on("submit", function (event) {
Without that, the jquery still prevents to submit blank inputs and when all filled, the ajax call is executed, all the fields sended and all works fine.
You can see this on: https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0
Try removing that part. Hope it helps to you!
UPDATE
Also, for sending the mail, add this part for sending better emails:
$reply = "your#mail.com";
$headers = "From: " . strip_tags($Subject) . "\r\n";
$headers .= "Reply-To: ". strip_tags($reply) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
Now you can use html tags:
$Body = '<html><body>';
$Body .= '<your actual code with html tags>';
$Body .= '</body></html>';
UPDATE 2
You forgot to set a value for radio inputs:
<input .... value='0'> or <input ... value='Si'>
$("#condominiForm").onclick(function (event) {
you should use on click event to run your all j query code its good of your project because some time on submit is not working

Categories