Hi all,
I am new in Angular and I try to make a website using phpmailer.
The page that I try to make is this one: http://markeviciute.com/#/contact
I want to make it work like that :
http://www.chaosm.net/angularjs/ex2_contact/
My problem is when I push "send" button, my page refresh and I dont succeed
to send the mail.
I see that contact-form.php is not called but I dont uderstand why.
contact.html
<article>
<h1>CONTACT</h1>
<p>FR No. +33 78 243 5010</p>
<p>LT No. +370 68 3399 54</p>
<br>
<div class="vertical-middle">
<div class="container" style="margin-left: 0px; padding-left: 0px;">
<div class="">
<div ng-controller="ContactCtrl" class="panel-body" style="
padding-left: 0px;">
<form ng-submit="submit(contactform)" name="contactform"
method="post" action="" class="form-horizontal" role="form">
<div class="form-group" ng-class="{ 'has-error':
contactform.inputName.$invalid && submitted }">
<label for="inputName" class="col-lg-1
control-label" style="text-align: left;">Name</label>
<div class="col-lg-11" style="padding-left: 0px;
">
<input ng-model="formData.inputName" type=
"text" class="form-control" id="inputName" style="max-width: 30%;" name=
"inputName" placeholder="Your Name" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
contactform.inputEmail.$invalid && submitted }">
<label for="inputEmail" class="col-lg-1
control-label" style="text-align: left;">Email</label>
<div class="col-lg-11" style="padding-left: 0px;
">
<input ng-model="formData.inputEmail" type=
"email" class="form-control" id="inputEmail" style="max-width: 30%;" name=
"inputEmail" placeholder="Your Email" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
contactform.inputSubject.$invalid && submitted }">
<label for="inputSubject" class="col-lg-1
control-label" style="text-align: left;">Subject</label>
<div class="col-lg-11" style="padding-left: 0px;
">
<input ng-model="formData.inputSubject" type
="text" class="form-control" id="inputSubject" style="max-width: 30%;" name=
"inputSubject" placeholder="Subject Message" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
contactform.inputMessage.$invalid && submitted }">
<label for="inputMessage" class="col-lg-1
control-label" style="text-align: left;">Message</label>
<div class="col-lg-11" style="padding-left: 0px;
">
<textarea ng-model="formData.inputMessage"
class="form-control" rows="4" id="inputMessage" style="max-width: 60%;" name
="inputMessage" placeholder="Your message..." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-11" style="
padding-left: 0px;">
<button type="submit" class="btn
btn-default" ng-disabled="submitButtonDisabled">
Send Message
</button>
</div>
</div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">
{{resultMessage}}</p>
</div>
</div>
</div>
</div>
</article>
contact.js
'use strict';
angular.module('myApp.contact', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/contact', {
templateUrl: 'view/contact/contact.html',
controller: 'ContactCtrl'
});
}])
.controller('ContactCtrl', function ($scope, $http) {
$scope.result = 'hidden'
$scope.resultMessage;
$scope.formData; //formData is an object holding the name, email,
subject, and message
$scope.submitButtonDisabled = false;
$scope.submitted = false; //used so that form errors are shown only
after the form has been submitted
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method : 'POST',
url : 'contact-form.php',
data : $.param($scope.formData), //param method from
jQuery
headers : { 'Content-Type':
'application/x-www-form-urlencoded' } //set the headers so angular passing
info as form data (not request payload)
}).success(function(data){
console.log(data);
if (data.success) { //success comes from the return json
object
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-success';
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed <img
src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif";
alt=":(" class="wp-smiley"> Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
Saisissez le code ici...
contact-form.php
<?php
if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset(
$_POST['inputSubject']) && isset($_POST['inputMessage'])) {
//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty(
$_POST['inputSubject']) || empty($_POST['inputMessage'])) {
$data = array('success' => false, 'message' => 'Please fill out the
form completely.');
echo json_encode($data);
exit;
}
error_reporting(E_ALL);
//SMTP needs accurate times, and the PHP time zone MUST be set
//This should be done in your php.ini, but this is how to do it if you
don't have access to that
date_default_timezone_set('Etc/UTC');
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';
//Create a new PHPMailer instance
$mail = new PHPMailer();
//Tell PHPMailer to use SMTP
$mail->isSMTP();
//Enable SMTP debugging
// 0 = off (for production use)
// 1 = client messages
// 2 = client and server messages
$mail->SMTPDebug = 2;
//Ask for HTML-friendly debug output
$mail->Debugoutput = 'html';
//Set the hostname of the mail server
$mail->Host = 'smtp.markeviciute.com';
//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP
submission
$mail->Port = 587;
//Set the encryption system to use - ssl (deprecated) or tls
$mail->SMTPSecure = 'tls';
//Whether to use SMTP authentication
$mail->SMTPAuth = true;
//Username to use for SMTP authentication - use full email address for gmail
$mail->Username = "[email protected]";
//Password to use for SMTP authentication
$mail->Password = "mypasswd";
//Set who the message is to be sent to
$mail->addAddress('[email protected]', 'Ambari Mehdi'); // La
personne qui recoit le mail
$mail->From = $_POST['inputEmail'];
$mail->FromName = $_POST['inputName'];
$mail->Subject = $_POST['inputSubject'];
$mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " .
stripslashes($_POST['inputMessage']);
if (isset($_POST['ref'])) {
$mail->Body .= "\r\n\r\nRef: " . $_POST['ref'];
}
if(!$mail->send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
$data = array('success' => false, 'message' => 'Message could not
be sent. Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($data);
exit;
}
else {
echo "Message sent!";
}
$data = array('success' => true, 'message' => 'Thanks! We have received
your message.');
echo json_encode($data);
} else {
$data = array('success' => false, 'message' => 'Please fill out the
form completely.');
echo json_encode($data);
}
?>
apps.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'angularFileUpload',
'myApp.menu',
'myApp.home',
'myApp.bio',
'myApp.event',
'myApp.fashion',
'myApp.life',
'myApp.polaroid',
'myApp.portrait',
'myApp.design',
'myApp.fineart',
'myApp.contact',
'ui.bootstrap',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/home'});
}]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
![http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif"](http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif"){kind=link}