send emails from phonegap android application - php

Question

I want to send a feedback form from android PhoneGap application i have used following code which is not working
1) i have used bellow Ajax code and JQuery files to send ajax request and HTML form, i want to send the email of 4 html fields
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/geturi.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#send").click(function() {
var fullName = $("#fullName").val();
var emailId = $("#emailId").val();
var mobileNo = $("#mobileNo").val();
var message = $("#message").val();
var dataString = "fullName=" + fullName + "&emailId=" + emailId + "&mobileNo=" + mobileNo + "&message=" + message + "&send=";
if ($.trim(fullName).length > 0 & $.trim(emailId).length > 0 & $.trim(mobileNo).length > 0 & $.trim(message).length > 0) {
$.ajax({
type: "POST",
url: "https://www.activebittechnologies.com/phonegap/mail.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function() {
$("#send").val('Sending Enquiry...');
},
success: function(data) {
if (data == "success") {
alert("Mail Sent");
$("#send").val('submit');
} else if (data == "error") {
alert("error");
}
}
});
}
return false;
});
});
</script>
<div class="content form">
<div class="header">
<div class="header-overlay"></div><img src="assets/banner/5.jpg">
<div class="info">
<h3 class="title">Send Contact Enquiry</h3>
<span data-close="#enquirepop" class="closeit"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<input id="fullName" name="fullName" type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input id="emailId" name="emailId" type="text" class="form-control" placeholder="Email Id">
</div>
<div class="form-group">
<input id="mobileNo" name="mobileNo" type="text" class="form-control" placeholder="Mobile No">
</div>
<div class="form-group">
<textarea class="form-control" id="message" name="message" placeholder="Your Message" style="color:#fff;"></textarea>
</div>
<div class="text-right">
<input type="button" id="send" class="btn btn-primary" value="Send">
</div>
</div>
unable to go on this page from phone gap when installed on android phone bellow is php script which is on server
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
$toEmail = "hotelinkonkan#gmail.com";
$mailHeaders = "From: " . $_POST["fullName"] . "<". $_POST["emailId"] .">\r\n";
$sentml=mail($toEmail, $_POST["fullName"], $_POST["message"], $mailHeaders);
if($sentml)
echo"success";
else
echo"error";
?>

Answer 1

I use $("#form1").serialize() to get all the values from the form, and I validate the values on the server side. You should always validate your values server side, because users can send a direct post to your php without any javascript validation.
Hope it helps.
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/geturi.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#send").click(function() {
$.ajax({
type: "POST",
url: "https://www.activebittechnologies.com/phonegap/mail.php",
data: $("#form1").serialize(),
crossDomain: true,
cache: false,
beforeSend: function() {
$("#send").val('Sending Enquiry...');
},
success: function(data) {
console.log(data);
if (data == "success") {
alert("Mail Sent");
$("#send").val('submit');
} else if (data == "error") {
alert("error");
}
}
});
return false;
});
});
</script>
<form id='form1' >
<div class="content form">
<div class="header">
<div class="header-overlay"></div><img src="assets/banner/5.jpg">
<div class="info">
<h3 class="title">Send Contact Enquiry</h3>
<span data-close="#enquirepop" class="closeit"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<input id="fullName" name="fullName" type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input id="emailId" name="emailId" type="text" class="form-control" placeholder="Email Id">
</div>
<div class="form-group">
<input id="mobileNo" name="mobileNo" type="text" class="form-control" placeholder="Mobile No">
</div>
<div class="form-group">
<textarea class="form-control" id="message" name="message" placeholder="Your Message" style="color:#fff;"></textarea>
</div>
<div class="text-right">
<input type="button" id="send" class="btn btn-primary" value="Send">
</div>
</div></form>