Submitting Form Details using PHP - javascript

I am fairly new to PHP. I have to send the form details to mail id. I browsed through The Internet and get the various link about the same. But I am facing the similar situation that when I am submitting my form filled with details then it is downloading the PHP file in the browser and main thing is I am not getting mail.
Here I pasting my code-
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-wrapper">
<h1>AJAX Contact Form Demo</h1>
<div id="form-messages"></div>
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The mailer.php
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
//
$recipient = "shubhamvashishtha22#gmail.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
My app.js file
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// TODO: The rest of the code will go here...
});
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// TODO
});
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
Can anyone please suggest me how I can make this problem go. I am actually just copying it than also this is happening. Please help me?

It is possible that your server doesn't have a SMTP likesendmail or postfix enabled. You can run phpinfo() and look for this directive sendmail_path and see what is set.

You say that the PHP file is downloaded through the browser. This is not supposed to happen. When the server gets a request for a PHP file, it is meant to run the PHP code and only respond with the resulting HTML page. Visitors to your web page should never see any code, only the text and tags you choose to echo, which leads me to believe that your server may not actually be running PHP at the moment.
Is your PHP installation configured correctly, and is it running? If you are not configuring your own server, does your web host of choice have PHP listed as one of the languages it supports?
Your AJAX doesn't seem to do anything other than telling the form to submit, so I don't think it's the problem, but for the sake of isolating the issue: What happens if you comment out the jQuery and AJAX script tags and just use a regular HTML form to POST to mailer.php?

Related

Form in wordpress using ajax javascript and php

I think there is something wrong with my javascript.
I have (html) form:
<html><form action="wp-content/themes/devwp-child/action_page.php" method="post">
<fieldset>
<input type="text" name="ime" placeholder="Ime *">
<input type="text" name="priimek" placeholder="Priimek *">
<input type="email" name="email" placeholder="E-poštni naslov*">
<input type="text" name="telefonska" placeholder="Telefonska številka">
<input type="text" name="podjetje" placeholder="Podjetje">
</fieldset>
<p id="izberi">IZBERI</p>
<fieldset>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</fieldset>
<fieldset>
<textarea name="field3" placeholder="Vaše želje"></textarea>
</fieldset>
<input type="submit" value="send" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</script>
<script src="main.js"</script>
</html>
Then i have 2 files:
-main.js
-action_page.php
action_page.php code:
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$ime = strip_tags(trim($_POST["ime"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
// Check that data was sent to the mailer.
if ( empty($ime) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "ptlabdoo#gmail.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
If form is properly full then it sends an email - that words fine; but if form is not full then i get:
Forbidden
You don't have permission to access /wp-content/themes/devwp-child/action_page.php on this server.
Additionally, a 400 Bad Request error was encountered while trying to use an ErrorDocument to handle the request.
main.js code:
$(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.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
});
});
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});

how to make a contact from html form and php page by ajax

I make this form to send data to a php page in another domain but always it results error. can someone explain my problem
I search in Internet many times but exactly I didnt find my answer
here is my code
html:
<form action="#" id="smail" method="post" class="form">
<input type="text" name="name" value="Your Name *">
<input type="text" name="mailadd" value="Your E-mail *">
<textarea name="message" cols="0" rows="0">Your Message *</textarea>
<input type="submit" value="send message">
</form>
js:
$('#smail').submit(function(event) {
event.preventDefault();
var mail = $("#smail input[name=name]").val();
var message = $("#smail input[name=mailadd]").val()+' '+$("#smail textarea[name=message]").val();
$.ajax({
type: "POST",
url:"http://cofeebeen.dx.am/email.php",
crossDomain: true,
data:{
"mail": mail,
"message": message,
},
dataType: "text",
error: function(){
alert("error")
}
}).success(function(result){
alert(result)
});
});
php:
<?php
$subject = $_POST["mail"];
$msg = $_POST["message"];
mail("someone#example.com",$subject,$msg);
?>
Your PHP code is not correct, we can get data at your PHP page like below.
Correct code:
$subject = $_POST["mail"];
$msg = $_POST["message"]
Incorrect code:
$subject = $_POST["name"];
$msg = $_POST["mailadd"]
I hope it will work now.
Per #mpf82's comment, if this is a cross domain request, that changes things. However, the AJAX request is currently passing 2 PHP post variables:
...
data:{
"mail": mail,
"message": message,
},
...
And you reference 3:
$_POST['name'];
$_POST['mailadd'];
$_POST['message'];
As #Reghbendra pointed out, you are referencing the incorrect variable names. Plus, since you did the concatenation of mailadd and message in Javascript, you can skip that part in PHP.
Therefore, your code would need to reference the two post variables that were passed by their proper indexes.
Result code:
<?php
$subject = $_POST["mail"];
$msg = $_POST["message"];
mail("someone#example.com",$subject,$msg);
?>
You also should consider the headers for the PHP mail function to ensure that it sends properly and is handled correctly. See the documentation for the function here.

AJAX form submission, solely to prevent page refresh and nothing else

I've built a simple HTML/PHP e-mail sign-up form to appear in the footer area of my website. There are only two fields: email and country.
The form works perfectly for my purposes. Data collection, validation, sanitization, error handling, clear fields, success notification, etc. -- ALL GOOD!
My final step is to implement AJAX to prevent a page refresh. This is all that is required from AJAX.
All tutorials, articles, and answers to related questions on this site I have found offer code that includes functions I've already handled with PHP.
I've gotten as far as the AJAX submission, which works. The page doesn't refresh, user input is inserted to the database, and I receive the confirmation e-mail.
I would appreciate some guidance (or a link to a tutorial) that can help me implement the PHP error logic and echo PHP success/error messages.
HTML
<form action="process_footer_form/" method="post" id="footer-form">
<ul>
<li>
<input type="email" name="email" id="email"
value="<?php if (isset($email)) {echo $email;} ?>">
</li>
<li>
<input type="text" name="country" id="country"
value="<?php if (isset($country)) {echo $country;} ?>">
</li>
<li>
<input type="submit" name="submit" id="submit">
</li>
</ul>
<?php if (isset($success_message)) {echo $success_message;} ?>
<?php if (isset($error_message)) {echo $error_message;} ?>
</form>
JQuery
$(function() {
// identify form
var form = $('#footer-form');
// create event listener
$(form).submit(function(event) {
// disable html submit button
event.preventDefault();
// serialize form data
var formData = $(form).serialize();
// submit form using AJAX
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// 1. echo PHP success message
// 2. fire PHP clear fields command
})
.fail(function(data) {
// 3. execute PHP error logic here
// 4. echo PHP error messages
});
});
});
PHP
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Load PHPMailer
require 'PHPMailer/PHPMailerAutoload.php';
// Create PHPMailer session
$mail = new PHPMailer;
$mail->CharSet = "UTF-8";
// SMTP settings
$mail->isSMTP();
$mail->Host = 'smtp.xxxxxxxxxx.com';
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->Username = 'xxxxxxxxxxxxxxxxxx';
$mail->Password = 'xxxxxxxxxxxxxxxxxx';
$mail->setFrom('xxxxxxxxxxxxxxxxxx' , 'xxxxxxxxxxxxxxxxxx');
$mail->addAddress('xxxxxxxxxxxxxxxxxx');
$mail->isHTML(true);
// Sanitize & Validate Input
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
$country = trim(filter_input(INPUT_POST, 'country', FILTER_SANITIZE_SPECIAL_CHARS));
// set connection to mysql server
$connection = mysql_connect("localhost","xxxxxxxxxxxxxxxxxx","xxxxxxxxxxxxxxxxxx");
// connect to database
mysql_select_db("xxxxxxxxxxxxxxxxxx", $connection);
// insert user input to table
$sql = "INSERT INTO email_subscribers (email,country) VALUES ('$email','$country')";
if (!$connection) {
$error_message = <<<ERROR
<div>ERROR. Form not sent. Please try again or contact us.</div>
ERROR;
// Send error notice to host
$mail->Subject = 'Website Error - Footer Form';
$mail->Body = ("Error Notice: A site user is having trouble on the footer form.");
$mail->send();
} else {
// run query
mysql_query($sql, $connection);
$success_message = <<<CONFIRMATION
<div>Subscription complete. Thank you!</div>
CONFIRMATION;
mysql_close($connection);
// Send confirmation notice to host.
$message = <<<HTML
<span>E-mail: {$email}</span><br>
<span>Country: {$country}</span>
HTML;
$mail->Subject = 'New E-mail Subscriber - Footer Form';
$mail->Body = $message;
$mail->send();
unset($email, $country);
}
} else {
header('Location: http://www.mywebsite.com/');
exit;
}
?>
You might try simplifying your life by using the FormData object. Then your code could look something like this. I have tested this out.
<form method="POST" id="subscription-form" enctype="multipart/form-data">
<input type="email" name="email" id="email" value="gulliver#tinyletter.com">
<input type="text" name="country" id="country" value="Lilliput">
<input type="button" value="submit" id="form-submit">
</form>
Below this you could put in a div for displaying messages:
<div id="messages"></div>
Then your jquery/javascript would look something like this:
<script>
(function(){
$("#form-submit").on("click", function(){ submitForm();});
})();
function submitForm(){
var form = document.getElementById("subscription-form");
var fd = new FormData(form);
$.ajax({
url: './PHPscript.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
$("#messages").html(data);
}
});
}
</script>
Regarding letting PHP "handle the messages" I think you're missing something about AJAX.
In your initial PHP page you are loading the html that PHP has generated and then PHPs part is finished. When you make the AJAX call you are asking the server to execute a different PHP script and then return the output of that script back to javascript.
At that point you need to put whatever message PHP has generated back into the current page, which has not and will not reload. That was the purpose of using AJAX in the first place. That is what the "messages" div is for.
As a way of completely understanding this create an extremely simple PHPscript.php file that looks like this and try it out:
<?php
print $_POST['email'] . ' ' . $_POST['country'];
?>
You will see your values returned in the current page inside that messages div.
The first request to, for example www.mysite.com/something.php will run the PHP and dump the result into the page. Ajax doesn't work this way. You send a request to your PHP file, and it sends a response that you can then inspect and do something with.
If ajax responses dumped their content into the page like an initial load, mayhem would ensue.
Try something like this:
$.ajax({
url: url,
type: type,
data: data
}).done(function (response) {
console.log(response);
});
then have a looksie in the console and see what goodness you're getting from the PHP script. Then build that .done callback up to process the results of your request and determine what to do.
Okay, first thing, var that = this is a trick when you loses context, but where you use it is not somewhere you can lose it .. so forget it :)
Then your find().each(), it's a good way of getting your values, but jquery offers a method which is $( this ).serializeArray() (it does kinda exactly what your want)
Also, you send your data with ajax, but you have no callback. Your ajax call need to have at least a function to call once everything went fine. This is done with done()
Finally, returning false does cancel the event in most cases but you will prefer preventDefault() as it disable default behavior, but still propagate event (for other handlers).
Sum it all:
$('form.ajax').submit( function(event) {
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serializeArray()
}).done(function(data) {
alert("Ajax call successful");
console.log("Server answer:" + data);
});
event.preventDefault();
});
Edit: Nvm my first remark, I understood lately your that = this stuff.

how to send an email to admin by running a php file through jQuery

i need to get a notification email to my site admin, when one user made a request through a from. my code is as follows, to link the php file in my server which sends the mail
$("#modelform").submit(function (event) {
event.preventDefault();
$.ajax({
url: 'send_mail.php',
success: function(){
alert('php runing');
$("#sendRequest").modal("show");
$("#myModal").modal("toggle");
}
});
});
but it doesn't react! my knowledge is little low can anyone guide me to achieve this? i checked this question is this wrong the way i do or do i need to link any file other than bootstrap libraries?
You can try something like this:
The HTML:
<textarea id="contactUs"></textarea><div id="button">Send</div>
<div id="response"></div>
The jQuery:
$("#button").click(function(){ //when div id="button" is clicked
var content = $("#contactUs").val(); //get value of textarea id="contactUs"
$.post('send_mail.php',{content: content}, function(data){ //post data
$('#response').html(data); //return content of send_mail.php
});
});
Then the send_mail.php:
<?php
if(isset($_POST['content']) === true){
$content = $_POST['content']; //might wanna sanitize if you're storing into db
$to = "YourEmail#example.com"; //The email sending to
$subject = "Sent From Contact form"; //The subject of email
mail($to, $subject, $content, 'From: contact#example.com'); //PHP mail() function
echo "Sent!"; //This will go to div id="response" on success
} else {
echo "Error!"; //This will go to div id="response" on error
}
?>

Form field not clearing by Ajax

Ok I create an ajax form by following a tutorial. Everything is working fine. But my form fields are not clearing after submission. I searched here & found some solution, but not working for me. I've tried:
number 1: $('form#contactform input[type="text"],texatrea, select').val('');
number 2: $("#name").val("");
$("#email").val("");
$("#phone").val("");
number 3: $('#contactform')[0].reset();
but this solutions are not working for me.
My html:
<div id="form-messages"></div>
<form method="post" action="mailer.php" name="contactform" id="contactform">
<fieldset>
<div class="col-sm-3 col-xs-6">
<!-- Name -->
<input name="name" type="text" id="name" size="30" placeholder="Name" value="" />
</div>
<div class="col-sm-3 col-xs-6">
<!-- Email -->
<input name="email" type="text" id="email" size="30" placeholder="Email" value="" />
</div>
<div class="col-sm-3 col-xs-6">
<!-- Phone -->
<input name="phone" type="text" id="phone" size="30" placeholder="Phone" value="" />
</div>
<div class="col-sm-3 col-xs-12">
<!-- Send button -->
<input type="submit" class="submit" id="submit" value="Send message" />
</div>
</fieldset>
</form>
My js:
$(function() {
// Get the form.
var form = $('#contactform');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Clear the form.
$('form#contactform input[type="text"],texatrea, select').val('');
// Set the message text.
$(formMessages).text(response);
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
& My Php
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = strip_tags(trim($_POST["phone"]));
$phone = str_replace(array("\r","\n"),array(" "," "),$phone);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($phone) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "friday#imransdesign.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n";
$email_content .= "Phone: $phone\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
header("HTTP/1.0 404 Not Found");
echo "Thank You! Your message has been sent.";
$_POST=array();
} else {
// Set a 500 (internal server error) response code.
header("HTTP/1.0 404 Not Found");
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
header("HTTP/1.0 404 Not Found");
echo "There was a problem with your submission, please try again.";
}
?>
What should I do?
live example: http://imransdesign.com/ajax-form/
Your selector for number 1 is wrong. It should be:
$('#contactform').find('input[type="text"], texatrea, select').val('');
I don't know about number 2 and number 3. May be you have duplicate IDs in your page ... let me take a look. Your IDs are good. Something else must be going on.
I tested number two and three in the dev tools console on your page and they work fine:
$('#contactform')[0].reset(); //cleared the whole form
$('#name').val(''); // Cleared the name field.
There seems to be a problem with your server. It's returning a 400/404 --- fail and since you do not clear your form in the .fail callback, your form would not be cleared. The .done callback is not being called:
mailer.php POST 400 text/html jquery-2.1.0.min.js:4 279 B 378 ms
mailer.php POST 400 text/html jquery-2.1.0.min.js:4 279 B 339 ms
mailer.php POST 404 text/html jquery-2.1.0.min.js:4 256 B 343 ms
Somehow the server returns Thank You! Your message has been sent. which is output by the following part in .fail():
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
Try
$('#contactform fieldset div input').val('');
instead of
$('form#contactform input[type="text"],texatrea, select').val('');
I think you need this to clear all input fields inside form tag use this
$("#formid").find('input, textarea').not(":submit").val('');
This FIDDLE will clear all the input fields and textarea inside the form tag on submitting .. change it as you want ..its just example
Just do this:
.done(function(response) {
...
contactform.reset();
}

Categories