Thursday, 24 September 2015

Ajax Form Submission AngularJS

Ajax Form Submission AngularJS

AngularJS is an MVC JavaScript framework which elegantly separates controller, business and model logic in your application.

HTML page

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="AddUser">
<form ng-controller="AppCtrl" name="add_user">
            <div class="modal-header">
                <h3 class="modal-title">Add User Form</h3>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" name="user_email" ng-model="user_name" placeholder="Enter Name">
                    <br />
                <input type="text" class="form-control" name="user_name" ng-model="user_email" placeholder="Enter Email">
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-success" name="add_user" value="Invite" ng-click="save_user()">
            </div>
    </form>
</body>
<script src="app.js"></script>

</html>

External JS file app.js

var app = angular.module('AddUser', []);

app.controller('AppCtrl', function($scope, $http){
$scope.save_user = function() {
$http.post('db.php',
{
'user_name'  : $scope.user_name,
'user_email' : $scope.user_email
}
)
.success(function (data) {
console.log("The user has been added successfully");
})
.error(function(data) {
console.log("Failed to add the user to DB ");
});
}

});

db.php file for handling database connection

$data = json_decode(file_get_contents("php://input"));
$servername = "localhost";
$username = "root";
$password = "";
$db = "sidpractice";
$conn = mysql_connect($servername, $username, $password) or die(mysql_error()." Error1 ");
mysql_select_db($db,$conn);
        $data = json_decode(file_get_contents("php://input"));
        $user_name = $data->user_name;  
        $user_email = $data->user_email;
        $qry = 'INSERT INTO filler(user_name, user_email) VALUES             ("'.$user_name.'","'.$user_email.'")';
    $qry_res = mysql_query($qry,$conn) or die(mysql_error()." Error2 ");
    if ($qry_res) {
        $arr = array('msg' => "Success");
        $jsn = json_encode($arr);
    }
    else {
        $arr = array('msg' => "Error");
        $jsn = json_encode($arr);

    }

Notes:

  • The ng-app property defines an AngularJS application.
  • The ng-model property binds the value of HTML controls (input, select, textarea) to application data.
  • We define the scope of our controller using the ng-controller directive.It will be in charge of processing the contents of this piece of HTML.
  • The ng-click event call the save_user function inside app.js controller.
If you want submit form like serialize you have to change little in code
Change ng-model name as
 <input type="text" class="form-control" name="user_email" ng-model="formData.user_name" placeholder="Enter Name">
                    <br />
                <input type="text" class="form-control" name="user_name" ng-model="formData.user_email" placeholder="Enter Email">

Change in controller by
$scope.formData = {};
$scope.save_user = function() {
console.log(this.formData);
    $http.post('db.php?action=add_user', 
        {
            'data'  : this.formData/* , 
            'user_email' : $scope.user_email */
        }
    )}

0 comments:

Post a Comment