1

I have built a contact form with AngularJS and using PHP. Form is working perfectly and I able to receive emails. However, after the form is submitted I want to disable the submit button and display success message and vice - versa.

My code are as follows:

var app = angular.module('myApp', ['jcs-autoValidate']);
app.run(['defaultErrorMessageResolver',
        function(defaultErrorMessageResolver) {
            defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
                errorMessages['validPhone'] = 'Please enter valid phone number';
            });
        }]);
app.controller('FormController', function($scope, $http){
   $scope.formData = {};
    $scope.result = 'hidden'
    $scope.submitButtonDisabled = false;
    $scope.submitted = false;
    $scope.submit = function(help) {
        $http({
            method : 'POST',
            url : 'process.php',
            data : $.param($scope.formData),
            headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        }) .success(function(data) {
            console.log(data);
            if (data.success) {
                $scope.submitButtonDisabled = true;
                $scope.resultMessage = data.message;
                $scope.result = 'bg-sucess';
            } else {
                   $scope.submitButtonDisabled = false;
                   $scope.resultMessage = data.message;
                   $scope.result = 'bg-danger';
               }
        });
    }
});

PHP

<?php
require_once 'phpmailer/PHPMailerAutoload.php';

if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['phone']) && isset($_POST['message'])) {

    if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message'])) {
        $data = array('success' => false, 'message' => 'Please the form completely.');
        echo json_encode($data);
        exit;
    }

    $mail = new PHPMailer();

    $mail->From = $_POST['email'];
    $mail->FromName = $_POST['name'];
    $mail->AddAddress('xxxx@gmail.com');
    $mail->Subject = $_POST['phone'];
    $mail->Body = "Name: " . $_POST['name'] . "\r\n\r\nMessage: " . stripslashes($_POST['message']);

    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' => 'Thank you for contacting us! We will get back to you soon.');
    echo json_encode($data);

} else {

    $data = array('success' => false, 'message' => 'Please the form completely.');
    echo json_encode($data);
}

CONSOLE:

{"success":true,"message":"Thank you for contacting us! We will get back to you soon."}

You can also access the demo link for more information http://newangularform.comlu.com/

Thanks for any help in advance

  • Share HTML template you are working with – Jitendra Khatri Feb 24 '16 at 05:44
  • Here is my HTML at JSfiddle alternately please check the link I have mentioned above for you can check it live, Thanks https://jsfiddle.net/Achillies/d9z4moc5/ –  Feb 24 '16 at 05:49
  • Your response is not proper. you can check in console. There is a script tag. But, there must be a JSON response or JSON string, So you can parse it in JSON – Jitendra Khatri Feb 24 '16 at 06:19
  • Could you please elaborate more as I have echo json_encode($data); in my PHP file... also even if the form is successful we get ng-binding as bg-danger! –  Feb 24 '16 at 06:31
  • Can you also update the Question with your `console.log(data)` ? – Dwijen Feb 24 '16 at 06:37
  • because you are checking if(data.status) which will never executes. It will leads to execute else case every time. that's why you are getting this. Just add debugger and debug it with yourself. – Jitendra Khatri Feb 24 '16 at 06:42
  • Updated with console...., Thank you Jitendra.. that is where I am stuck and could not find the way around... –  Feb 24 '16 at 06:45
  • I tried with if(data.error) now the button is disabled but still no message via data binding if it was successful or error. I got the email though!... Inspect element showed bg-success but message was not displayed –  Feb 24 '16 at 06:51
  • {"success":true,"message":"Thank you for contacting us! We will get back to you soon."} – Jitendra Khatri Feb 24 '16 at 07:03
  • the above should be {"success":true,"message":"Thank you for contacting us! We will get back to you soon."} – Jitendra Khatri Feb 24 '16 at 07:04
  • For testing purpose I am using free hosting service provider I deleted their default PHP file still I am getting that I guess will try on live server and will update you. Thank you –  Feb 24 '16 at 07:14
  • http://stackoverflow.com/questions/2268868/webhoster-inserts-a-javascript-which-brokes-my-code-how-to-remove-it – Jitendra Khatri Feb 24 '16 at 07:29
  • Dude you are awesome! it worked you can check too! thank you so much. Make it an answer I will accept it –  Feb 24 '16 at 07:42

0 Answers0