angularJs and PHP send email form
I want to send an email with the form parameters, with AngularJs and PHP, the email is sending but the parameters (name, email, etc) are empty. Where is the mistake? I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.
HMTl Code:
<form id="myform" name="myForm" data-abide role="form" ng-submit="processForm()">
<div class="formData.name">
<label>Your name <small>required</small>
<input type="text" name="formData.name" id="formData.name" required pattern="[a-zA-Z]+" ng-model="formData.name">
</label>
<small class="error">Name is required.</small>
</div>
<div class="formData.name">
<label>Your subject <small>required</small>
<input type="text" name="formData.subject" id="formData.subject" required pattern="[a-zA-Z]+" ng-model="formData.subject">
</label>
<small class="error">subject is required.</small>
</div>
<div class="formData.inputEmail-field">
<label>Email <small>required</small>
<input type="email" name="formData.email" id="formData.email" required ng-model="formData.email">
</label>
<small class="error">An email address is required.</small>
</div>
<div class="formData.tel">
<label>Phone #
<input type="text" name="formData.tel" id="formData.tel"required pattern="^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$" ng-model="formData.tel">
</label>
<small class="error">Please enter your number in the format '123-456-7890'.</small>
</div>
<div class="formData.message">
<label>Message
<textarea name="formData.message" id="formData.message" ng-model="formData.message"></textarea> </label></div>
<button type="submit" class="columns small-centered">Submit</button>
<div class="panel">
<p>{{formData}}</p>
<p>{{codeStatus}}</p>
</div>
</form>
Code in my controller:
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' },
}).success(function(formData) {
console.log(formData);
if (formData.success) {
console.log('Success');
} else {
console.log('Fail');
}
});
};
PHP Code:
<?php
$postdata = file_get_contents("php://input");
if(!isset($postdata)) {
$response = array('status' => 'error', 'value'=>'Eroare de server - 0.');
die(json_encode($response));
}
$request = json_decode($postdata);
$name = htmlspecialchars($request->name);
$tel = htmlspecialchars($request->tel);
$email = htmlspecialchars($request->email);
$subject = htmlspecialchars($request->subject);
$mess = htmlspecialchars($request->message);
$to = "cristina@yahoo.com";
$subject = $subject;
$message = "The user: $name contacted you using the contact form. His details are:\r\nPhone: $tel\r\nEmail: $email\r\nMessage: $mess";
$headers = "From: <".$email.">". "\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";
if(mail($to, $subject, $message, $headers)) {
$response = array('status' => 'success', 'value'=>'Mail trimis');
echo json_encode($response);
} else {
$response = array('status' => 'error', 'value'=>'Mail netrimis');
die(json_encode($response));
}
?>
Answer
Solution:
Did you take a look at FormGroups? They are very useful in this scenario, and are very easy to use. Check them out here.
Edit: This is a posible aproach for Angular, not AngularJs, sorry for the misundersanting.
Source