how do i submit a angular js built form to an email address

Question

I have the following form using angular. I want to submit the results to an email address and have set up a php action page with server side code to do this.

However, it feels wrong the way I'm using the action="action.php" call on the form element. Dirty in fact... but i'm not sure of any other way to this. Is this the best way to submit the form? Should I be using an AJAX call via ng-submit to collect and store the data....

Here's a JSfiddle of the form but without the action="action.php" - I was experimenting with ng-submit="mealForm.$valid".

Below is my code using the action="action.php" - you'll see I have added the action call in and omitted the ng-submit="mealForm.$valid" as was unsure how this would work, even after extensive reading of the docs

Any help much appreciated - newbie to angular :)

Thanks

HTML




    
    
    



    
        
            
                Standard Form
            
            
                Custom Form
            
        
        
        Standard Form
        Use the standard form if the number people and meals are the same throughout your stay.
E.G : 10 people wanting 7 dinners over a 7 day period.
        Use the custom form if the number of people wanting meals alters each day.
        * required fields
        
            
                
                    
                        First Name *
                        
                    
                
                
                    
                        Last Name *
                        
                    
                  
            

            
                
                    
                        Email *
                        
                     
                
                
                    
                        Phone Number
                        
                    
                  
            

            
                
                     
                        Start Date
                        
                    
                
                
                     
                        End Date
                        
                    
                
            
            
                
                    
                        Number of Days  *(Discount of 10% Applies for 10 or more days)
                        
                    
                
                
                    
                        Group Size  *(max 15)
                        
                    
                
            
            
                
                    
                        Meal Type  *(Select from below options)
                        
                            {{meal.name}} - {{meal.description}} {{meal.price | currency}}
                            
                        
                    
                
                
                    
                        Accomodation Details (Please provide full address / specific dietery requirements and any other information)
                        
                    
                
            
            
                
                
                    Total: {{form.total(booking.totalDays, booking.groupSize)[0] | currency}} (10% Discount of {{form.total(booking.totalDays, booking.groupSize)[1] | currency}} applied)
                
            
            
                Form complete: {{mealForm.$valid}}

ANGULAR JS (APP.JS) EDITED

(function () {

var app = angular.module('form', []);
// start of edit
app.controller('FormController', ['$scope','$window',
    function($scope,$window){

    this.meals = mealTypes;

    $scope.handleFormSubmit = function (booking) {
        $http.post('action.php', booking).success(function (data, status) {
            if (data.success) {
                $window.alert("Thank you! Your message has been sent.");
            }
        }).error(function (data, status) {
            $window.alert("Sorry, there was a problem! " + data.message);
        });
    };

    // end of edit

    this.selectMeal = function (setMeal) {
        if (!setMeal.active) {
            angular.forEach(this.meals, function (s) {
                s.active = false;
            });
            setMeal.active = true;
        }
    };

    this.total = function (days, size) {
        var total = 0;
        var percentage = 0;
        var mealType;
        var discount = false;
        total = days * size;


        angular.forEach(this.meals, function (s) {
            if (s.active) {
                total *= s.price;
                mealType = s.name + ' - ' + s.description;
            }

        });
        if (days >= 10) {
            percentage = (total / 100) * 10;
            total -= percentage;
            discount = true;
        }

        return [total, percentage, mealType, discount];

    };

});

var mealTypes = [{
    name: 'breakfast',
    price: '20',
    description: 'Three course breakfast',
    active: true
}, {
    name: 'dinner',
    price: '20',
    description: 'Three course dinner',
    active: false
}, {
    name: 'both',
    price: '40',
    description: 'Breakfast and Dinner',
    active: false
}

];

app.controller('PanelController', function () {
    this.tab = 1;

    this.selectTab = function (setTab) {
        this.tab = setTab;
    };

    this.isSelected = function (checkTab) {
        return this.tab == checkTab;
    };
});
})();

PHP (ACTION.PHP)


";

    echo $error."

";

    echo "Please go back and fix these errors.

";

    die();

}



$firstName = $_POST['firstName'];

$lastName = $_POST['lastName'];

$email_from = $_POST['email'];

$telephone = $_POST['telephone'];

$startDate = $_POST['startDate'];

$endDate = $_POST['endDate'];

$totalDays = $_POST['totalDays'];

$groupSize = $_POST['groupSize'];

$mealType = $_POST['mealType'];

$discount = $_POST['discount'];

$total = $_POST['total'];


$email_message = "Form details below.

";


function clean_string($string) {

  $bad = array("content-type","bcc:","to:","cc:","href");

  return str_replace($bad,"",$string);

}



$email_message .= "First Name: ".clean_string($firstName)."
";

$email_message .= "Last Name: ".clean_string($lastName)."
";

$email_message .= "Email: ".clean_string($email_from)."
";

$email_message .= "Telephone: ".clean_string($telephone)."
";

$email_message .= "Start Date: ".clean_string($startDate)."
";

$email_message .= "End Date: ".clean_string($endDate)."
";

$email_message .= "Total Days: ".clean_string($totalDays)."
";

$email_message .= "Group Size: ".clean_string($groupSize)."
";

$email_message .= "Meal Type: ".clean_string($mealType)."
";

$email_message .= "Discount: ".clean_string($discount)."
";

$email_message .= "Total: ".clean_string($total)."
";





// create email headers

$headers = 'From: '.$email_from."
".

'Reply-To: '.$email_from."
" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);  

?>


Thank you for contacting us. We will be in touch with you very soon.

ngDeveloper · Accepted Answer

You can use an $http.post(...) request in AngularJS. This will allow you to receive a response and show a success message, without having to reload the page.

If you want to go that route, I suggest adding a ng-model="params.fieldName" attribute to each field (just change fieldName to match the value passed to the PHP form). Then in your controller, you could do something like:

$scope.handleFormSubmit = function (params) {
    $http.post('action.php', params).success(function (data, status) {
        if (data.success) {
            $window.alert("Thank you! Your message has been sent.");
        }
    }).error(function (data, status) {
        $window.alert("Sorry, there was a problem! " + data.message);
    });
};

Then in your

tag you could do something like:

Then in your PHP script, you just need to output a JSON object with the variables you want to pass to AngularJS.

Ideally instead of using $window.alert(...) you would display some sort of inline message instead. If the form was successfully sent, you could also hide it as well to prevent a user from sending it a second time. You also should do something with the submit button, to disable it, while the form is being sent, so it can't be clicked more than once.

Also, instead of returning a value from PHP, you can return a status code instead:

If it's in the 200-range, it will activate the .success(...) callback. If it's in the 400-range, it will activate the .error(...) callback. You can check what each status code means.

how do i submit a angular js built form to an email address

Answers (2)

Related Questions