Dark

Light

Dark

Light

Scroll to top

How to use Ajax with WordPress and Cordova based mobile app? Piece of code is illustrated.

HTML

<form>
<div class="error"></div>
<input type="text" id="form-field-name">
<input type="text" id="form-field-phone">
<input type="text" id="form-field-email">
<input type="text" id="form-field-message">
<input type="submit" class="send">
</form>
<div class="loader"></div>

CSS

.detail {
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid #000;
    outline: none;
    margin: 15px auto;
}
.submit
{
    background-color: #EAC15A;
    outline: none;
    border: 0px;
    padding: 15px 20px;
    font-size: 18px;
	font-weight:700;
}
.error
{
	color:red;
	font-size:10px;
	float:left;
	text-align:center;
	height:15px;
	width:100%;
	margin-bottom:15px;
}


.loader {
  display:none;
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #000;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 500ms linear infinite; /* Safari */
  animation: spin 500ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

jQuery

jQuery(document).ready(function($) {

//validation method for email	
	
	function validateEmail($email){
		var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
		return reg.test( $email );
	}	

//validation method for email
	
	function validatePhone($phone) {
	  var phoneReg = /^[789]\d{9}$/;
	  return phoneReg.test( $phone );
	}
	
	
	//submit action starts here
	$(".send").click(function(e){
	
	//prevent default Submission behaviour of html
	e.preventDefault();
	
	//Show Loader code here
		$('.loader').css('display','block');
	
	//get all the values here
	
	var fullname = $("#form-field-name").val();
	var phone = $("#form-field-phone").val();
	var email = $("#form-field-email").val();
	var message = $("#form-field-message").val();
			
			
			
	//validate all the values before proceeding		
		
		if(fullname == ""){ 
			$("#form-field-name").focus(); 
			$('.error').html('Please enter your name'); 
			$('.loader').css('display','none');
			return false; 
		}
	
		if(!validateEmail(email)){ 
			$("#form-field-email").focus(); 
			$('.error').html('Please enter valid email'); 
			$('.loader').css('display','none');
			return false; 
		}
	
		if(!validatePhone(phone)){ 
			$("#form-field-field_f72623c").focus();  
			$('.error').html('Please enter valid phone number'); 
			$('.loader').css('display','none');
			return false; 
		}
	
		if(message == ""){ 
			$("#form-field-message").focus(); 
			$('.error').html('Please enter the message'); 
			$('.loader').css('display','none');
			return false; 
		}
		
		

		//prepare your data to submit with ajax
			
			//Ajax url for your wordpress setup
			var ajaxurl = "https://websitename.com/wp-admin/admin-ajax.php";
			
			//data
			var data = {
			'action' : 'send_mail_from_app',
			'fullname' : fullname,
			'phone' : phone,
			'email' : email,
			'message' : message,
			 crossDomain: true,
             cache: false,
			}
		
			//ajax call
			$.post(ajaxurl,data,function(response){
				$('.loader').css('display','none');
				$(".detail").val("");
				$('.response').html("Email sent successfully!");
			}); 	
		
	});
	
	
});

PHP

//allow cors headers if you are using this for mobile app
function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');


//ajax function call
function send_mail_from_app(){

$msg = $_POST['message'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$phone = $_POST['phone'];



$message = "
	Sender: $fullname ($email) <br>
	Phone: $phone <br>
	Message: $msg <br>
";

$to = "[email protected]";

$headers = 'From: "' . $fullname. '" <[email protected]>' . "\r\n";
$headers =  'Reply-To: '.$email.'' . "\r\n" .
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";
mail( $to, $fullname, $message, $headers );



die();
}
add_action('wp_ajax_send_mail_from_app', 'send_mail_from_app');
add_action('wp_ajax_nopriv_send_mail_from_app', 'send_mail_from_app');
Author avatar
Amitpal Singh
https://amitpalsingh.com

Post a comment

Your email address will not be published. Required fields are marked *