Form Validation using onclick() event - javascript

So I'm having some issues getting my validation which resides in my php action script.
I have the following form:
<form action="contact.php" method ="post" enctype="multipart/form-data" id="contact_form" name="contact_form">
<div class="div_input"><input name="name" type="text" value="Name: " class="input4" /></div>
<div class="div_input"><input name="phone" type="text" value="Phone: " class="input4" /></div>
<div class="div_input"><input name="email" type="text" value="E-mail: " class="input4" /></div>
<textarea name="message" cols="0" rows="0" class="textarea2" >Message: </textarea>
Then I am submitting using the onclick() method. This is where my issue is arising I believe.
<div class="link4"><span>send</span></div>
<div class="link4"><span>clear</span></div>
</form>
And my script...
<?php
$errors = '';
$myemail = 'test#test.com';
$name = $phone = $email = $message ='';
$nameError = $emailError =$phoneError = $messageError = '';
if(empty($_POST['name']))
{$nameError='Name is required!';}
else
{
$name = test_input($_POST['name']);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name))
{
$nameError='Only letters and white space allowed';
}
}
if(empty($_POST['email']))
{$emailError='Email is required!';}
else
{
$email = test_input($_POST['email']);
//check to make sure is a valid email format
if(!preg_match("/([\w\-]+\#[\w\-]+\.[\w\-]+)/",$email))
{
$emailError = "Invalid email format!";
}
}
if(empty($_POST['phone']))
{
'Phone number is required';
}
else
{
$phone = test_input($_POST['phone']);
//Allow only digits in the phone number
if(!preg_match("/^[\d\-]+$/",$phone));
{
$phoneError = 'Phone must be only numbers and dashes';
}
}
if (empty($_POST['message']))
{
$messageError = 'Message is required!';
}
else
{
$message = test_input($_POST['message']);
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Phone Number: $phone\n Message \n $message";
$headers = "From: $email \r\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
//header('Location: index-5.html');
?>
When I test this, no validation runs at all. I can click send with the form empty and no errors appear.
I've seen a couple people having issues with the javascript onclick function and validation in their php script. Could this be it? Or am I missing something in my script or form? I'm thinking maybe I need to add some javascript after the submit() method.
What do you all think?

The main problem is that your PHP script is sending the message regardless of whether or not there's an error.
Try checking whether $nameError, $emailError,$phoneError, and $messageError are all empty strings before submitting.
Other suggested improvements:
Read up on PHP's filter functions and use them instead of your regular expressions.
Take advantage of HTML5 validation in browsers that support it by adding required to all of your input fields.
Use <input type="submit" value="send"> and <input type="reset" value="clear"> instead of onclick. They're a little bit harder to style with CSS, but it's better for accessibility and works even when JavaScript doesn't.

One thing I see is
if(empty($_POST['phone']))
{
'Phone number is required';
}
should be
if(empty($_POST['phone']))
{
$phoneError = 'Phone number is required';
}

Related

I have a HTML form that uses a POST request and PHP file to send me an email automatically, but it isn't working...any advice?

I have a form that uses an HTML form, http post request, and PHP backend to automatically send me the data that a user inputs into the form. The submission works as expected, but I am not getting an email. My email is also run by outlook. Not sure if it's an encryption thing.
HTML Code
<form action="mail.php" method="POST">
<div class="email-box">
<input class="tbox" id="email_box" name="email" type="email" style="cursor: pointer;" placeholder="Enter your email">
<button class="btn" id="email_btn" type="submit" name="button">Subscribe</button>
</div>
</form>
<!-- Snipped JavaScript validation -->
PHP
<?php
$errors = '';
$myemail = 'me#website.com';
if (empty($_POST['email'])) {
$errors .= "\n Error: all fields are required";
}
$email_address = $_POST['email'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address)) {
$errors .= "\n Error: Invalid email address";
}
if (empty($errors)) {
$to = $myemail;
$email_subject = "New Vrify subscription: $email_address";
$email_body = "You have a new subscriber. " .
"Here are the details:\n Email: $email_address \n " .
$headers = "From: subscriber#website.com";
mail($to, $email_subject, $email_body, $headers);
//redirect to the 'thank you' page
header('Location: thank-you.html');
}
?>
This may not be the full solution, but as far as I'm aware
"New Vrify subscription: $email_address"
is not valid. Instead, concatenate them using the . operator
"New Vrify subscription:".$email_address
Do the same to the other variables you have, I had the same issue when working on the following php:
if (($_SERVER["REQUEST_METHOD"] ?? 'GET') == "POST") {
$msg ="New message from mysite!\n".$_POST["message"]."\nReply Email:".$_POST["email"];
mail("me#gmail.com", time(), $msg,"From: contact#mysite");
}

Prevent people from sending multiple forms without page refresh

I've currently got a working PHP/AJAX form. It shows a form-message when the form is sent, or when it has an error. But, the page doesn't refresh when the form is sent, so it'll be easy to send multiple emails by just a simple double click (or even more clicks). Have a look at my code:
HTML
<form action="" method="POST">
<ul class="form-style-1">
<li>
<input type="text" id="mail-name" name="name" class="field-divided" maxlength="15" placeholder="Voornaam *" /> <input type="text" id="mail-lastname" name="lastname" class="field-divided" maxlength="15" placeholder="Achternaam" >
</li>
<li>
<input type="text" id="mail-email" name="email" placeholder="E-mail *" class="field-long" maxlength="40" >
</li>
<li>
<input type ="text" id="mail-phone" name="phone" placeholder="Telefoonnummer" class="field-long" maxlength = "15">
</li>
<button class="mail-submit" id="mail-submit" type="submit" name="submit">Versturen</button>
<span style="color: #0184b2; text-align: center; font-size: 20px; margin: 0 auto; display: block; padding-top: 10px;" class="form-message"></span>
</ul>
</form>
JS
$("form").on("submit",function(event){
event.preventDefault();
var name = $("#mail-name").val();
var lastname = $("#mail-lastname").val();
var email = $("#mail-email").val();
var phone = $("#mail-phone").val();
var subject = $("#mail-subject").val();
var information = $("#mail-information").val();
$.post("donation-contact.php",
{
name: name,
lastname: lastname,
email: email,
phone: phone,
submit: "yes"
},
function(data){
$(".form-message").html( data );
}
);
});
PHP
<?php
if (isset($_POST['submit'])) {
$email_to = "#";
$email_subject = "#";
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$errorEmpty = false;
$errorEmail = false;
if (empty($name)) {
echo "<span class='form-error'>Voer de verplichte velden in!</span>";
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'>Geef een geldig E-mail!</span>";
$errorEmail = true;
}
else {
$formcontent=" Naam: $name \n\n Achternaam: $lastname \n\n Email: $email \n\n Telefoon: $phone";
$mailheader = "From: ".$_POST["email"]."\r\n";
$headers = "From: ". htmlspecialchars($_POST['name']) ." <" . $_POST['email'] . ">\r\n";
$headers .= "Reply-To: " . $_POST['email'] . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
mail($email_to, $email_subject, $formcontent, $mailheader);
echo "<span class='form-success'>De mail is verzonden!</span>";
}
}
?>
I've tried disabling the form button when it's being pressed. This works if the user doesn't make any mistakes, but it will also disable the button when it shows an error message.
Is there a way to disable the button only when the form is sent? Or to remove all the form input when the form is sent?
Thank you for your time
All you need is basically already present in your code.
You intercept the submission via
$("form").on("submit",function(event){
event.preventDefault();
// ...
This is the place to disable the submit button:
$("form").on("submit",function(event){
event.preventDefault();
$('#mail-submit').prop('disabled', true);
// ...
});
But you need a different treatment in the PHP script so that you can handle errors. Basiacally you need to send back a JSON object which will have a simple text property indicating the status (error / success) and a text property for the message (which may contain HTML).
PHP
if (empty($name)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Voer de verplichte velden in!</span>');
$errorEmpty = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = array('status' => 'error', 'message' => '<span class='form-error'>Geef een geldig E-mail!</span>');
$errorEmail = true;
}
else {
// send email...
$response = array('status' => 'success', 'message' => '<span class='form-success'>De mail is verzonden!</span>');
}
// No matter what happened, send the respons as a JSON object for easy treatment in JavaScript
echo json_encode($response);
Now in JavaScript you will receive an object, instead of text in you callback function:
function(data) {
$(".form-message").html( data.message );
// If there was an error you must re-enable the submit button
if (data.status === 'error') {
$('#mail-submit').prop('disabled', false);
}
}

Javascript not getting called on form submit

I have a pretty simple form in html from which i am trying to send an email. I checked online for some tutorials sing js but most of them were not working. Here is my code the form is there but when i press submit the js function is not getting called rather it is not doing anything on the html form.
<form class="form-inline" id="contact-form" onSubmit="return false">
<center><p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Name" name="name" id="name" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="email" class="form-control" size="30" placeholder=" E-mail Address" name="email" id="email" required></p>
<p><input style="height:3vw;width:40vw;font-size:1.2vw;" type="text" class="form-control" size="30" placeholder=" Subject" name="subject" id="subject" required></p>
<p><textarea style="height:10vw;width:40vw;font-size:1.2vw;" placeholder=" Message..." class="form-control" name="message" id="message"></textarea></p>
<p><button type="submit" class="button" name="btn_submit" id="btn_submit">Send</button></p></center>
</form>
i have included the js file as it is after the <div> ending of the form
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
functions.js file is as follows
//Contact Us
$("#btn_submit").click(function() {
//get input field values
var user_name = $('input[name=name]').val();
var user_email = $('input[name=email]').val();
var user_message = $('textarea[name=message]').val();
//simple validation at client's end
var proceed = true;
if(user_name==""){
proceed = false;
}
if(user_email==""){
proceed = false;
}
if(user_message=="") {
proceed = false;
}
//everything looks good! proceed...
if(proceed)
{
//data to be sent to server
post_data = {'userName':user_name, 'userEmail':user_email, 'userMessage':user_message};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
//load json data from server and output message
if(response.type == 'error')
{
output = '<div class="alert-danger">'+response.text+'</div>';
}else{
output = '<div class="alert-success">'+response.text+'</div>';
//reset values in all input fields
$('.form-inline input').val('');
$('.form-inline textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
});
and my email handler is as follows :
<?php
if($_POST)
{
$to_Email = "email.com"; //Replace with recipient email address
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userSubject"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Subject = filter_var($_POST["userSubject"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
{
$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
$subject = $user_Subject;
$message_Body = "<strong>Name: </strong>". $user_Name ."<br>";
$message_Body .= "<strong>Email: </strong>". $user_Email ."<br>";
$message_Body .= "<strong>Message: </strong>". $user_Message ."<br>";
$headers = "From: " . strip_tags($user_Email) . "\r\n";
$headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
//proceed with PHP email.
/*$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
*/
$sentMail = #mail($to_Email, $subject, $message_Body, $headers);
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.'));
die($output);
}
}
?>
On pressing submit the js file is not being called and there is no error in console either. Can anyone please help me out where i am making the mistake. Thank you.
You need to prevent the default form submission action which is to refresh the page.
You need to add a parameter to your function that can track the event and then call preventDefault() from that parameter:
$("#btn_submit").click(function(e) {
e.preventDefault();
...
}
Try replacing
$("#btn_submit").click(function() {
with
$(document).on("click,", "#btn_submit", function(){
You need to prevent the form from submitting, otherwise it will just directly submit and turn to the server-side.
You can do such a thing using jQuery:
$("#btn_submit").click(function(e) {
e.preventDefault();
//your code goes here after preventing submission
}

php error handling with exceptions

I found the following codes for processing a contact form and would like to add error handling and exceptions to them.
HTML Form looks like:
<div class="contact-form">
<form id="contact-form" action="sendmail.php" method="post" title="Contact Form" role="form">
<div class="col-sm-6">
<div class="form-group">
<label for="contact-name">Name</label>
<input type="text" name="name" placeholder="Enter your name..." class="contact-name" id="contact-name">
</div>
<div class="form-group">
<label for="contact-email">Email</label>
<input type="text" name="email" placeholder="Enter your email..." class="contact-email" id="contact-email">
</div>
<div class="form-group">
<label for="contact-subject bold">Subject</label>
<input type="text" name="subject" placeholder="Your subject..." class="contact-subject" id="contact-subject">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="contact-message">Message</label>
<textarea name="message" placeholder="Your message..." class="contact-message" id="contact-message"></textarea>
</div>
</div>
<div class="col-sm-12 text-center">
<button type="submit" class="btn btn-default sketchFlowPrint" id="submit">Send</button>
</div>
</form>
</div>
sendmail.php looks like:
<?php
// Email address verification
function isEmail($email) {
return(preg_match("/^[-_.[:alnum:]]+#((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i", $email));
}
if($_POST) {
// Enter the email where you want to receive the message
$emailTo = 'example#gmail.com';
$clientName = addslashes(trim($_POST['name']));
$clientEmail = addslashes(trim($_POST['email']));
$subject = addslashes(trim($_POST['subject']));
$message = addslashes(trim($_POST['message']));
$array = array();
$array['nameMessage'] = '';
$array['emailMessage'] = '';
$array['messageMessage'] = '';
if($clientName == '') {
$array['nameMessage'] = 'Please enter your name.';
}
if(!isEmail($clientEmail)) {
$array['emailMessage'] = 'Please insert a valid email address.';
}
if($message == '') {
$array['messageMessage'] = 'Please enter your message.';
}
if($clientName != '' && isEmail($clientEmail) && $message != '') {
// Send email
$headers = "From: " . $clientName . " <" . $clientEmail . ">" . "\r\n" . "Reply-To: " . $clientEmail . "\r\n";
mail($emailTo, $subject . ' (Example - Website)', $message, $headers);
}
echo json_encode($array);
} else {
header ('location: index.html#contact');
}
?>
jquery script looks like:
// Contact form
$('.contact-form form').submit(function(e) {
e.preventDefault();
var form = $(this);
var nameLabel = form.find('label[for="contact-name"]');
var emailLabel = form.find('label[for="contact-email"]');
var messageLabel = form.find('label[for="contact-message"]');
nameLabel.html('Name');
emailLabel.html('Email');
messageLabel.html('Message');
var postdata = form.serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.nameMessage !== '') {
nameLabel.append(' - <span class="red error-label"> ' + json.nameMessage + '</span>');
}
if(json.emailMessage !== '') {
emailLabel.append(' - <span class="red error-label"> ' + json.emailMessage + '</span>');
}
if(json.messageMessage !== '') {
messageLabel.append(' - <span class="red error-label"> ' + json.messageMessage + '</span>');
}
if(json.nameMessage === '' && json.emailMessage === '' && json.messageMessage === '') {
form.fadeOut('fast', function() {
form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
});
}
}
});
});
The code works very nice excepts for TWO things:
I receive the email but the clients email address is not displayed anywhere on my email and I cannot reply to the client, I tried messing around with the headers section but couldn't get it right (please help me fix this).
I want the form to let the user know if the form was not submitted. For this I added this code to the jquery script after the last "if" function:
else {
form.fadeOut('fast', function() {
form.parent('.contact-form').append('Something went wrong! Please refresh page and try again.');
});
}.
I would like to add exceptions to this. I want this "else" function I added to only execute if there is something wrong with the anything else except for when the user did not fill all the required fields (if the user did not fill in the required fields the form must display "Please enter you name." or "Please insert a valid email address." or "Please enter your message." on top of the input fields depending on which field was not filled). Hope this makes sense.
in your php, you should define another couple of variables
1. $my_email = "info#example.com"; //senders email
2. $subject = "Query from My Domain"; //a subject line
and then use
mail($_REQUEST['email'],$subject,$message,$headers,"-f{$my_email}");
where
$headers = "From: " . $my_email;
actually i usually use
$headers = "From: " . $my_email;
$headers .= PHP_EOL;
$headers .= "MIME-Version: 1.0".PHP_EOL;
$headers .= "Content-Type: multipart/mixed;".PHP_EOL;
$headers .= " boundary=\"boundary_sdfsfsdfs345345sfsgs\"";
i don't quite why you have the receiver's email in the php; these values should be posted from your form
e.g. $field_order_keys = array('name','email','comment');
and then requested using $_REQUEST
this will fix the sender's email problem
i have created a plunker of a generic form of my contact php script that i generally use. It has gibberish and field-checking etc in it. Perhaps you will find it useful (the link doesn't land on it, it's the contactconfirm.php above it)

Data submit with ajax get result but not contact form

I have a online quiz by jQuery, I want once the user submit it, to send the results with the contact information's of the users to the moderator.
I make it work, sending the results information correctly, the problem is it doesn't send the user information.
I've been playing around with different solution's, I can manage or to have the user information or the results of the quiz, but not both at the same time !
Here is the "contact form":
<form action="submit.php" method="POST" id="form">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="button" type="submit" value="Send" class="btnShowResult">
Here is the jQuery part about the ajax to send the data result of the quiz, the div #resultKeeper being the result I want to receive
$(function() {
$('#form').on('submit',function(e) { e.preventDefault();
$.ajax({
url:'submit.php',
type:'POST',
data:{'results':$('#resultKeeper').html(),'subject':'Subject of your e-mail'},
success:function() {
$('#responseMessage').html()
}
});
return false;
});
});
here is my PHP
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$results = $_POST['results'];
$formcontent="From: $name \n Message: $message \n Results: \n $results";
$recipient = "myemail#gmail.com";
$subject = "my subject";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
?>
If in the Jquery I change the
$(function() {
$('#form').on('submit',function(e)
by #button instead of #form, I receive the informations from the contact form, but not anymore from the results.
Also by keepin the #form, I receive the result of the quiz, and few value as the form content, but not the informations from the placeholder !, here is what I receive by email:
"
From:
Message:
Results:
<div> Question 1 is true</div><div> Question 2 is false\</div><div> Question 3 is true\</div>\<div> Question 4 is false\</div>\<div> Question 5 is false\</div>\<div class=\"totalScore\">\<br>Your total score is 2 / 5\</div>\<div class=\"totalScore\">\<br>CONGRATULATION, YOUR LEVEL IS A1.1\</div
"
As we can see I have the From: and Message: appearing, but not the proper name and message that the user are writing .. .
Any help will be adorable !!
Here is the allcode of JSFiddle:
http://jsfiddle.net/ccwJJ/
You do not receive your form values in your php file when you make an ajax request, you have to explictly send them in the ajax request.
Consider below form
<form action="submit.php">
<input type="email" name="email" id="email"/>
<input type="submit" value="send"/>
</form>
Case 1 Normal way
When you submit the form normally, say hitting enter or on click you would receive the form values implicitly in your php file as $_POST['email] variable
<?php $email = $_POST['email'] ; // valid ?>
Case 2 Ajax way
When you submit the form using ajax, You do not receive the form values implicitly in your php file since your ajax request does not know about your form elements, You have to send the values explicitly in the ajax request.
$.post('submit.php',function(result){
$('#responseMessage').html(result);
});
<?php $email = $_POST['email'] // error ?>
why? because you have not set the post variable email
Then how to do it?
var uemail = $("#email").val(); // get the email
// Set email and send it through ajax
$.post('submit.php',email:uemail,function(result){
$('#responseMessage').html(result);
});
<?php $email = $_POST['email'] // works perfect ?>
So now change your form to this
<form action="submit.php" method="POST" id="quesForm">
<label>Name</label>
<input name="username" type="text" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="button" type="submit" value="Send" class="btnShowResult">
</form>
Notice I have changed name='name' to name='username'and I suggest you to change id=form to some other name say id=quesForm. I have seen some browsers does not seem to work as expected when you use tags as id names and attributes as attribute values like you have done name=name and id=form
I suggest you to use $.post instead of $.ajax, It simplifies the things for you when you really require $.post
jQuery
$(function() {
$('#quesForm').on('submit',function(e) {
e.preventDefault();
// I am fetching the form values you could get them by other selectors too
var uname = $("input[name=username]").val();
var uemail = $("input[name=email]").val();
var msg = $("textarea").val()
$.post('submit.php',{username:uname,email:uemail,message:msg,results:$('#resultKeeper').html(),subject:'Subject of your e-mail'},function(result){
// result variable contains your response text
// I guess you trying to update your response
// notice I have used html(result) as you have just used html()
$('#responseMessage').html(result);
});
// you dont require `return false`
// you have already did it using e.preventDefault();
});
});
php
<?php $name = $_POST['username'];
$email = $_POST['email'];
$message = $_POST['message'];
$results = $_POST['results'];
$results = strip_tags($results); // add this to remove html tags and all
$formcontent="From: $name \n Message: $message \n Results: \n $results";
$recipient = "thibault.rolando#gmail.com";
$subject = "my subject";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
?>
To remove html tags in php you have function named strip_tags();
You need to send the form data, plus your results string.
Try the following:
$(function() {
$('#form').on('submit',function(e) { e.preventDefault();
//grab the form data into array
var formData = $('#form').serializeArray();
//add your result and subject
formData.push({ results:$('#resultKeeper').html(), subject:'Subject of your e-mail'});
$.ajax({
url:'submit.php',
type:'POST',
data:formData,
success:function() {
$('#responseMessage').html()
}
});
return false;
});
It is better to use following way for getting form input values:
var data = $('#yourformid').serielize();
You will get the data in serielize format and put it on ajax data param.

Categories