Form using jQuery AJAX PHP does not submit input field via email
I have this contact form and I am trying to use jQuery / AJAX and PHP to enter field input values via email. Well, the email sends me just fine, but without entering a field. Email is just the $ to and $ subject of the PHP mail () function. See code below. Any ideas, criticism or suggestions are appreciated. Thank you for your help!
$(document).ready(function() {
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
//var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$("button").click(function(e) {
// Stop the browser from submitting the form.
e.preventDefault(e);
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,
success: function(result){
$('#contact-name').val('');
$('#contact-email').val('');
$('#contact-website').val('');
$('#contact-message').val('');
},
error: function(xhr,status,error){
}
});
});
});
});
<?php
require_once 'swiftmailer/lib/swift_required.php';
//Swift Mailer script
$filter = FILTER_SANITIZE_STRING;
//Grab POST Data
$name = filter_var($_POST['contact-name'], $filter);
$email = filter_var($_POST['contact-email'], FILTER_SANITIZE_EMAIL);
$website = filter_var($_POST['contact-website'], FILTER_SANITIZE_URL);
$message = filter_var($_POST['contact-message'], $filter);
//Create email body
$body = "Name: " . $name . "<br />" . "Email: " . $email . "<br />" . "Website: " . $website . "<br />" . "Message: " . $message;
//Create Transport
$transport = Swift_SmtpTransport::newInstance("host", "port", "security")
->setUsername("username")
->setPassword("password");
//Create Mailer
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance('New Form')
->setFrom(array("email" => "Lead from Contact form"))
->setTo(array('email', 'email' => 'Recipients'))
->setSubject('You have a new message!')
->setBody($body, 'text/html');
//Send Message
$result = $mailer->send($message);
if ($result) {
// Set the response code to 200 (okay). // http _response_code (200); echo "Thank you! Your message has been sent."; } else {// Set the response code to 500 (internal server error). // http _response_code (500); echo "Oops, something went wrong and we couldn't send your message"; }
?>
source to share
Use a function val()
to get data from inputs
$(document).ready(function(e) {
$("button").click(function(e) {
e.preventDefault();
var ajax = {
isSubmitting: false,
send: function() {
if(ajax.isSubmitting == false) {
ajax.isSubmitting = true;
var userName = $('input[name="contact-name"]').val();
var userEmail = $('input[name="contact-email"]').val();
var userWebsite = $('input[name="contact-website"]').val();
var userMessage = $('input[name="contact-message"]').val();
if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
alert("Please fill out all required fields.");
}
else {
$.post("mailer3.php", {
name: userName,
email: userEmail,
website: userWebsite,
message: userMessage
}, function(data) {
ajax.isSubmitting = false;
});
}
}
else alert("Send only 1 email at a time.");
}
}
});
Try this with $ .ajax:
$("button").click(function(){
isSubmitting: false;
var userName = $('input[name="contact-name"]').val();
var userEmail = $('input[name="contact-email"]').val();
var userWebsite = $('input[name="contact-website"]').val();
var userMessage = $('input[name="contact-message"]').val();
if(isSubmitting == false) {
$.ajax({url: "mailer3.php",
type:'POST',
data:{
name: userName,
email: userEmail,
website: userWebsite,
message: userMessage
},
success: function(result){
isSubmitting == true;
},error(xhr,status,error){
isSubmitting == false;
}
});
}
});
source to share
Since you are not using jQquery val (); the method for getting your input value feeld whioch is why you can't get the value. Use the chained val () method with elements calling as shown below.
`$ (document) .ready (function (e) {//e.preventDefault (); $ (" button "). click (function (e) {
var ajax = {
isSubmitting: false,
send: function() {
if(ajax.isSubmitting == false) {
ajax.isSubmitting = true;
var userName = $("input[name=contact-name]").val();
var userEmail = $("input[name=contact-email]").val();
var userWebsite = $("input[name=contact-website]").val();
var userMessage = $("input[name=contact-message]").val();
if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
alert("Please fill out all required fields.");
}
else {
$.post("mailer3.php", {
name: userName,
email: userEmail,
website: userWebsite,
message: userMessage
}, function(data) {
ajax.isSubmitting = false;
});
}
}
else alert("Send only 1 email at a time.");
}
} `
source to share