2016-07-29 36 views
0

我试图为我的应用程序使用PHPMailer和Ionic与Gmail创建一个联系表单。 页面在触发脚本时收到(失败)结果消息,但我从未从表单中获取电子邮件。这里是我的代码:PHPMailer和Ionic与Gmail

template.html

<label class="item item-input" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }"> 
      <input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required> 
    </label> 
    <label class="item item-input" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }"> 
      <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required> 
    </label> 
<label class="item item-input" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }"> 
      <textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea> 
    </label> 
    <div class="padding"> 
      <button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">Send Message</button> 
     </div> 
    </form> 
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> 

app.js

.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.'; 
       $scope.result='bg-danger'; 
      } 
     } 
    }); 

PHP

<?php 
    require_once 'phpmailer/PHPMailerAutoload.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; 
     } 

     //create an instance of PHPMailer 
     $mail = new PHPMailer(); 

     $mail->From = $_POST['inputEmail']; 
     $mail->FromName = $_POST['inputName']; 
     $mail->AddAddress('[email protected]'); //recipient 
     $mail->Subject = $_POST['inputSubject']; 
     $mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']); 

     $mail->isSMTP(); 
     $mail->Host = gethostbyname('smtp.gmail.com'); 
     $mail->Port = 587; 
     $mail->SMTPSecure = "tls"; 
     $mail->SMTPAuth = true; 
     $mail->Username = "[email protected]"; 
     $mail->Password = "passwordform"; 
     $mail->setFrom('[email protected]', 'Contact Form'); 


     if (isset($_POST['ref'])) { 
      $mail->Body .= "\r\n\r\nRef: " . $_POST['ref']; 
     } 

     if(!$mail->send()) { 
      $data = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo); 
      echo json_encode($data); 
      exit; 
     } 

     $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); 

    } 

回答

0

您需要初始化$ scope.formData = {},以便它可以保存您期望的值。现在,它试图将值绑定到未定义的范围变量。

  • 编辑 - 它看起来像你的按钮中没有ng-click处理程序来注册点击提交。请将此添加到您的按钮。此外,只有输入值包含在a中时,$ valid才有效。

template.html

<form name="myForm"> 
    <label class="item item-input" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }"> 
    <input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required> 
    </label> 
    <label class="item item-input" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }"> 
     <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required> 
    </label> 
    <label class="item item-input" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }"> 
     <textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea> 
    </label> 
    <div class="padding"> 
     <button type="submit" class="btn btn-default" 
       ng-disabled="myForm.$invalid || submitButtonDisabled == true" 
       ng-click=submit(formData)>Send Message</button> 
    </div> 
    </form> 
    <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> 

这是什么东西做的是它的注册$ scope.submit按钮,在HTML你在FORMDATA作为参数传递。现在有一个名称,它的所需值在ng-disabled中被检查,该名称指向相同的名称,如果我已经清理了app.js,则会禁用它,以便正确获取参数。

.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; 
    $http({ 
     method : 'POST', 
     url  : 'contact-form.php', 
     data : $.param(contactform), //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'; 
     } 
    }); 
    } 
}); 
+0

我替换了$ scope.formData;与$ scope.formData = {}; ...仍然失败。消息..它可能是一个验证问题或PHP代码? – velvetInk

+0

尝试我上面所做的编辑。 – tothefux