Develop Reference

Contact us form isn't sending all populated fields to email, only a few? PHP AJAX JS

So I've gone through a thread that helped me build this contact us form, but it talked about validating and making the fields required. There are two fields I have in my form that doesn't need to be required $organization and $budget, I can't seem to get the information in there to send with the email. The email shows those fields as blank but the other fields are populated.
I have practically zero experience in PHP outside of this form.
Expected output:
Name: xxx
Email: xxx#xxx.com
Organization: xxx
Budget: xxx
Message: xxx
What I actually receive in my email:
Name: xxx
Email: xxx#xxx.com
Organization:
Budget:
Message: xxx
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"];
}
// Organization
$organization = $_POST["organization"];
// Budget
$budget = $_POST["budget"];
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "example#mydomain.com";
$Subject = "Received msg from WIP contact form";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Organization: ";
$Body .= $organization;
$Body .= "\n";
$Body .= "Budget: ";
$Body .= $budget;
$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 "Sorry, something went wrong.";
} else {
echo $errorMSG;
}
}
?>
HTML:
<form role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="organization" class="h4">Organization</label>
<input type="text" class="form-control" id="organization" placeholder="Enter organization">
<div class="help-block with-errors"></div>
</div>
<div class="form group col-sm-6">
<label for="budget" class="h4">Budget</label>
<input type="number" class="form-control" id="budget" placeholder="$50000">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="message" class="h4">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="form-submit" class="button pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
JavaScript:
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
formError();
submitMSG(false, "Please fill in the required fields.");
} 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();
var organization = $("#organization").val();
var budget = $("#budget").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message + "&organization=" + organization + "&budget" + budget,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
}
function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "We'll be in touch with you soon!")
}
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";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
EDIT
Thanks to Uxmal for suggesting the name="xxxx" in the input field. He said that by doing this, the $_POST is looking for inputs with name. Which made me realise I must be doing something else wrong. Turns out my ajax was poorly written and I was also missing the <form action aswell. Below is the corrected version of the form and ajax code.
<form action="form-process.php" method="POST" role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="organization" class="h4">Organization</label>
<input type="text" class="form-control" id="organization" name="organization" placeholder="Enter organization name">
<div class="help-block with-errors"></div>
</div>
<div class="form group col-sm-6">
<label for="budget" class="h4">Budget</label>
<input type="number" class="form-control" id="budget" name="budget" placeholder="50000">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="message" class="h4">Message</label>
<textarea id="message" class="form-control" rows="5" name="message" placeholder="Enter your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="form-submit" class="button pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</form>
JS:
function submitForm(){
$.ajax({
type: "POST",
url: "php/form-process.php",
data: $('#contactForm').serialize(),
success: function(text) {
if (text == "success") {
formSuccess();
} else {
formError();
submitMSG(false, text);
}
}
});
}

You PHP code at line
// Organization
$organization = $_POST["organization"];
// Budget
$budget = $_POST["budget"];
looks for inputs with name: organization and budget, no to for id organization and budget.
At you html is
<input type="text" class="form-control" id="organization" placeholder="Enter organization">
<input type="number" class="form-control" id="budget" placeholder="$50000">
without a tag: name="organization" and tag: name="budget".
So put those tags like
<input type="text" class="form-control" id="organization" name="organization" placeholder="Enter organization">
<input type="number" class="form-control" id="budget" name="budget" placeholder="$50000">
and then your PHP code will get the data.

Can't add spaces, form to email handler

Good morning,
I'm trying to add spaces to the words on my form. Here's an example:
Sample pic
For example, the "Referralname" and "Phonenumber" should be "Referral Name" and "Phone Number".
Here's the form:
<div class="container">
<div class="row" style="margin-top: -10px;">
<div class="col-md-6 col-md-offset-3">
<h2>Referral Form <a style="font-size: 10px;" href="../index.php">Back to homepage</a></h2>
<p> Send your referrals using the form below and we will get back to you as early as possible. </p>
<form role="form" method="post" id="reused_form" enctype="multipart/form-data" >
<div class="form-group">
<label for="name"> Your Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Name:</label>
<input type="text" class="form-control" id="email" name="referralname" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Phone Number:</label>
<input type="text" class="form-control" id="email" name="phonenumber" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<div class="form-group">
<label for="name"> Upload Resumé:</label>
<input type="file" class="form-control" id="image" name="image" required>
</div>
<button type="submit" class="btn btn-lg btn-success pull-right" id="btnContactUs">Send! →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Sent your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
And here's the php code:
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )
*/
require_once './vendor/autoload.php';
use FormGuide\Handlx\FormHandler;
$pp = new FormHandler();
$validator = $pp->getValidator();
$validator->fields(['name', 'referralname', 'email', 'phonenumber'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);
$pp->attachFiles(['image']);
$pp->sendEmailTo('angela.sales#teamspan.com', 'marjorie.bugayon#teamspan.com'); // ← Your email here
echo $pp->process($_POST);
private function compose_mail($post)
{
$content = "Form submission: \n\n";
foreach($post as $name=>$value)
{
$content .= ucwords($name).":\n";
$content .= "$value\n\n";
}
$this->mailer->Body = $content;
}
Sorry if my question isn't good, trying my best to make a good question.

You could do something like this
private function compose_mail($post)
{
$content = "Form submission: \n\n";
foreach($post as $name=>$value)
{
$content .= ucwords($name).":\n";
$content .= "$value\n\n";
}
$content = str_replace("Referralname", "Referral Name", $content);
$content = str_replace("Phonenumber", "Phone number", $content);
$this->mailer->Body = $content;
}

"Referral's Name" is a label. It's only good for user interaction. Your PHP code never sees it.
"referralname" is the name of an INPUT control of type "text". This is what your code uses.
You can't (or at least shoudn't) add spaces and punctuation to a field name. There's no need for them to be identical.

I think that you want that space in the body of the e-mail. So try this adding these 2 lines in php:
$content = str_ireplace('Referralname', 'Referral Name', $content);
$content = str_ireplace('Phonenumber', 'Phone Number', $content);
//right before this line:
$this->mailer->Body = $content;
Php function str_ireplace will replace the first string with the second, but only in the body of e-mail.
Str_ireplace or str_replace should be the same for you. The former is case-insensitive, the latter is case-sensitive.

javascript - stop refresh if error is returned from php

I was wondering whether it would be possible to add something to my javascript which would allow a refresh if the form is submitted fine however will not refresh the page if an error is returned back from PHP.
is this possible? if so could anyone provide me with any guidance that will help me achieve this please. I have manage to get the javascript to refresh when the form is submitted and a message is returned.
this is the js:
function addCall() {
var data = $('#addForm').serialize();
$.post('../Admin/ManageCourses_AddSubmit.php', data, function(response){
$("#addForm").html(response);
//'soft'reload parent page, after a delay to show message
setTimeout(function(){
$('#addModal').modal('hide')
location.reload();
},3500);
}).fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
and the php which processes the form and validates it:
<?php
session_start();
if (empty($_POST['course_title'])) {
$message = " Value is required";
}
else {
$course_title = trim($_POST['course_title']);
# Validate Course #
if (!ctype_alpha($course_title)) {
$message = '<p class="error">Course title should be alpha characters only.</p>';
}
elseif (strlen($course_title) < 3 OR strlen($course_title) > 50) {
$message = '<p class="error">Course title should be within 3-50 characters long.</p>';
}
else {
include "../includes/db_conx.php";
try
{
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = $db_conx->prepare("INSERT INTO `insights`.`course_details` (`course_title`) VALUES (:course_title)");
$sql->bindParam(':course_title', $course_title, PDO::PARAM_STR);
$sql->execute();
$message = "<p class='text-success'> Record Successfully Added <span class='glyphicon glyphicon-ok'/></p>";
}
catch(Exception $e) {
if( $e->getCode() == 23000)
{
$message = 'Course already exists in database';
}
else
{
$message = $e->getMessage();
}
}
}
}
die($message);
?>
It would really useful to the user to be able to make amendments to the form instead of rewriting it all again.
the form:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add New Record: </h4>
</div>
<div class="modal-body">
<form id="addForm" class="addForm">
<div class="form-group">
<label class="control-label" for="forename">Forename:</label>
<div class="controls">
<input id="forename" name="forename" type="text" placeholder="Enter forename(s)" class="form-control" maxlength="100" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="surname">Surname:</label>
<div class="controls">
<input id="surname" name="surname" type="text" placeholder="Enter surname" class="form-control" maxlength="100" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="email">Email:</label>
<div class="controls">
<input id="email" name="email" type="email" placeholder="Enter a valid email" class="form-control" maxlength="255" value="" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="username">Username:</label>
<div class="controls">
<input id="username" name="username" type="text" placeholder="username" class="form-control" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" type="password" placeholder="password" class="form-control" maxlength="40" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="confirm_password">Confirm Password:</label>
<div class="controls">
<input id="confirm_password" name="confirm_password" type="password" placeholder="retype password" class="form-control" maxlength="40" required="">
</div>
</div>
<?php
include "../includes/db_conx.php";
try {
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt2 = $db_conx->prepare('SELECT * FROM role_type');
$stmt2->execute();
$roles = $stmt2->fetchAll(PDO::FETCH_ASSOC);
}
catch(Exception $e)
{
die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
}
?>
<div class="control-group">
<label class="control-label" for="role_type">Select User Type:</label><p></p>
<select name="role">
<option value=''>Select One</option>";
<?php foreach($roles as $role): ?>
<option value="<?php echo $role['role_type_code'] ?>"><?php echo $role['role_title'] ?></option>
<?php endforeach ?>
</select>
</div>
<p></p>
<?php
include "../includes/db_conx.php";
try {
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt3 = $db_conx->prepare('SELECT * FROM course_details ORDER BY course_title');
$stmt3->execute();
$courses = $stmt3->fetchAll(PDO::FETCH_ASSOC);
}
catch(Exception $e)
{
die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
}
?>
<div class="control-group">
<label class="control-label" for="course_details">Select Course:</label><p></p>
<select name="course">
<option value=''>Select One</option>";
<?php foreach($courses as $course): ?>
<option value="<?php echo $course['course_code'] ?>"><?php echo $course['course_title'] ?></option>
<?php endforeach ?>
</select>
</div>
<input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
</form>
</div>
<div class="modal-footer">
<div class="btn-toolbar">
<button type="button" class="btn btn-default" class="pull-right" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" class="pull-right" onclick="addUCall();">Submit <span class="glyphicon glyphicon-saved"></button>
</div>
</div>
</div>
</div>
</div>
Thank you in advance.

Your message variable contain both error and success message. It will reload page every time when it receives response.
Add this after $("#addForm").html(response); -
var n = response.search("class=\'text-success\'");
if(n!=-1){
//reload success
}
else{
//stay on page, errors
}

As you're returning the error messages in the response, check for the error class and do the reload if necessary.
$.post('../Admin/ManageCourses_AddSubmit.php', data, function(response){
if(response.contains("text-success")) {
// put your logic here for success
} else {
// logic for errors
}
});

Ajax not posting form data

I recently asked a question about executing a Send Mail script without a page reload and worked out what my problem was with my AJAX, that's all resolved. I now have an issue with the following:
When my form posts to my AJAX the script is executed, however the post data doesn't seem to be come through to the PHP script.
The link to my question is: Contact Form same page success.
Here is my PHP:
<?php
$name = ($_POST['name']);
$email = ($_POST['email']);
$fsubject = ($_POST['subject']);
$message = ("Name: ". $name . "\nEmail Address: " . $email . "\n\nMessage: " . $_POST['message']);
// Set Mail
$to = "emailaddress#fakeone.com";
$header = 'From: contactus#fakeone.com' . "\r\n" .
'Reply-To: website#fakeone.com';
$subject = "{$fsubject}";
$body = "{$message}";
// Send Mail
if (mail($to, $subject, $body, $header))
{
echo("<p>Message successfully sent!</p>");
}
else
{
echo("<p>Message delivery failed...</p>");
}
?>
My HTML
<div id="success" style="color:red;"></div>
<form action="" id="contactform" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="submit" value="Send Message" class="btn btn-info btn-lg" data-loading-text="Loading...">
</div>
</form>
My AJAX
<script>
$(document).ready(function () {
$('#submit').click(function () {
$.post("sendmail.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
});
return false;
});
});
</script>
When I fill out the forms, nothing comes back it sends an empty email.
Any idea's why the post isn't working on this would be greatly appreciated. If I am breaking any rules by posting another question please let me know!
Regards,
Dan

I think the problem is in your PHP code. You've got a variable named $headers, but in your mail function you're using $header. A typo.

Change the following lines from this -
$subject = "{$fsubject}";
$body = "{$message}";
to this -
$subject = $fsubject;
$body = $message;

A singular behavior about a Registration form in PHP

I have a registration form in my (project of) website of the following form: (i used bootstrap framework):
<div id="main-box" class="container">
<div class="row-fluid">
<div id="signup">
<div id="float"></div>
<div id="center_signup">
<h3>Registrazione Studente</h3>
<?php if (isset($registerError)): ?>
<p><?php htmlout($registerError); ?></p>
<?php endif; ?>
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="nome" class="col-sm-2 control-label">Nome: </label>
<div class="col-sm-6">
<input type="text" name="nome" id="nome" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email: </label>
<div class="col-sm-6">
<input type="text" name="email" id="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password: </label>
<div class="col-sm-6">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Now the data of the form are managed from a index.php controller file, which do this (the register.html.php file is the template file in which there is the code above):
if (isset($_GET['register']))
{
include 'register.html.php';
if (!isset($_POST['email']) or $_POST['email'] == '' or
!isset($_POST['password']) or $_POST['password'] == '')
{
$GLOBALS['registerError'] = 'fill in both fields';
exit();
}
$password = md5($_POST['password'] . 'figarodb');
if (databaseContainsUser($_POST['email'], $password))
{
$GLOBALS['registerError'] = 'Student already registered.';
exit();
}
include $_SERVER['DOCUMENT_ROOT'] . '/figaro/includes/db.inc.php';
// Puts the student in the relevant table
try
{
$sql = 'INSERT INTO studente SET
nome = :nome,
email = :email,
password = :password';
$s = $pdo->prepare($sql);
$s->bindValue(':nome', $_POST['nome']);
$s->bindValue(':email', $_POST['email']);
$s->bindValue(':password', $password);
$s->execute();
}
catch (PDOException $e)
{
$error = 'Errore in student registration.';
include $_SERVER['DOCUMENT_ROOT'] . '/figaro/includes/error.html.php';
exit();
}
header('Location: .');
exit();
}
This header might redirect at the home page, but it doesn't do it!
If instead of the page with bootstrap and javascript code, i modify the registration page in this way:
<body>
<h1>Registration</h1>
<form action="" method="post">
<?php if (isset($registerError)): ?>
<p><?php echo $registerError; ?></p>
<?php endif; ?>
<div>
<label for="name">Nome completo: <input type="text" name="nome"
id="nome"></label>
</div>
<div>
<label for="email">Email: <input type="text" name="email"
id="email"></label>
</div>
<div>
<label for="password">Password: <input type="password"
name="password" id="password"></label>
</div>
<div>
<input type="submit" value="Invio">
</div>
</form>
</body>
now the controller redirect at the home page correctly!
I can not explain this behavior, any help will be greatly appreciated!Thanks!

In your php file there is written :
header('Location: .');
Maybe your web application is redirected on index.html by default because it's the default root.