An example of how to do both methods - traditional form submission and ajax.
<?php
ob_clean();
$payload=array();
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['submit'] ) ){
/* for ajax & standard form submissions */
$args=array(
'name' => FILTER_SANITIZE_STRING,
'email' => FILTER_SANITIZE_EMAIL,
'message' => FILTER_SANITIZE_STRING
);
$_POST=filter_input_array( INPUT_POST, $args );
/* Have any additional fields been injected into the POST request? */
foreach( $_POST as $field => $value ){
if( !in_array( $field, array_keys( $args ) ) )exit( sprintf( 'unknown parameter "%s"', $field ) );
}
/* Are all the required fields in the POST array? */
foreach( array_keys( $args ) as $field ){
if( !in_array( $field, array_keys( $_POST ) ) )exit( sprintf('Empty or missing parameter "%s"',$field ) );
}
/* assign fields to variables */
extract( $_POST );
/*
check the validity of the email address -
doesn't actually determine if this is a genuine email though
*/
$email = filter_var( $email, FILTER_VALIDATE_EMAIL );
if( $email ){
$to = 'xx@gmail.com';
$from = $email;
$subject = 'Message sent from website';
$headers = sprintf( 'From: %s<%s>', $name, $email );
$status=@mail( $to, $subject, $message, $headers );
$payload['email']=$email;
$payload['status']=$status;
$payload['message']=$message;
$payload['method']='FORM';
}
if( !empty( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest' ){
header('Content-Type: application/json');
$payload['method']='AJAX';
exit( json_encode( $payload ) );
}
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>PHP & Javascript - send email</title>
<script>
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
};
xhr.onerror=function(e){
alert(e)
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send( buildparams( params ) );
};
const buildparams=function(p){
if( p && typeof( p )==='object' ){
p=Object.keys( p ).map(function( k ){
return typeof( p[ k ] )=='object' ? buildparams( p[ k ] ) : [ encodeURIComponent( k ), encodeURIComponent( p[ k ] ) ].join('=')
}).join('&');
}
return p;
};
document.addEventListener('DOMContentLoaded',function(){
let bttn=document.querySelector('input[type="button"][name="ajax-submit"]');
bttn.addEventListener( 'click', function(e){
let params={
submit:'submit',
name:document.querySelector('input[name="name"]').value,
email:document.querySelector('input[name="email"]').value,
message:document.querySelector('textarea[name="message"]').value
};
let callback=function(r){
let json=JSON.parse( r );
alert( r.status ? 'Yay - message sent!' : 'Boo - message sending failed' );
document.querySelector('form > pre').innerText=r;
};
ajax.call( this, location.href, params, callback )
},false );
},false );
</script>
<style>
form{width:60%;padding:1rem;box-sizing:border-box;margin:2rem auto 0 auto;float:none;border:1px solid black}
input,button{padding:1rem;margin:0.25rem auto}
textarea{padding:1rem;width:100%;resize:none;margin:0.5rem auto}
[type='text'], [type='email'], textarea{width:calc(100% - 2rem);}
[type='button'], button{width:100%;}
pre{width:100%;float:none;margin:auto;color:green;}
</style>
</head>
<body>
<form method='post'>
<input class='w3-input w3-border' type='text' id='name' name='name' placeholder='Name' required name='Name'>
<input class='w3-input w3-border' type='email' id='email' name='email' placeholder='Email' required name='Email'>
<textarea id='message' type='text' name='message' required placeholder='Message' rows='6' cols='30' ></textarea>
<button class='w3-button w3-black' type='submit' name='submit' value='submit'>
<i class='fa fa-paper-plane'>Sende Nachricht</i>
</button>
<input type='button' name='ajax-submit' value='Send Email using ajax' />
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $payload ) ){
printf('<pre>%s</pre>',print_r( $payload,true ) );
} else {
echo '<pre></pre>';
}
?>
</form>
</body>
</html>
