How to add sharepoint online list items without using client context

See more:

Javascript

SharePoint2013

, +

Hi
My task is to add list item in Sharepoint online(cloud)from Html form data. But the constraint here is... using either javascript/ECMAScript/angularjs/jQuery & also the html form should be simple html.

Using Scripts i can pass

1)Sharepoint site Url
2)Sharepoint site Credentials(username and password).

Now i can able to access the site using adal.js, as below:

App.js

myApp.config(["$routeProvider", "$httpProvider", "adalAuthenticationServiceProvider",
    function ($routeProvider, $httpProvider, adalProvider) {

        'use strict';

        //Initialize ADAL
        adalProvider.init({
            tenant: "TenentName.onmicrosoft.com",
            clientId: "ClientID",
            cacheLocation: "localStorage",
            endpoints: {
                'https://TenentName.sharepoint.com/_api/': 'https://TenentName.sharepoint.com',
                'https://TenentName-my.sharepoint.com/_api/v1.0/me': 'https://TenentName-my.sharepoint.com'
             }
        }, $httpProvider);

        //Configure routes
        $routeProvider.when("/", {
            controller: 'homeCtrl',
            templateUrl: 'Views/home.html',
            requireADLogin: true
        });
        $routeProvider.when("/documents", {
            controller: 'docsCtrl',
            templateUrl: 'Views/docs.html',
            requireADLogin: true
        });
        $routeProvider.otherwise({
            redirectTo: "/"
        });
    }
]);

homeCtrl.js: to retrieve user info.

myApp.controller("homeCtrl", ["$scope", "adalAuthenticationService",
    function homeCtrl($scope, adalAuthenticationService) {

        "use strict";
        angular.element("title").text("Home");

        if (adalAuthenticationService.userInfo.isAuthenticated) {
            $scope.message = "Welcome. You are logged in as " + adalAuthenticationService.userInfo.userName;
        }
        else {
            $scope.message = "Welcome. You are not logged in.";
        }

    }
]);

docsCtrl.js : to retrieve lists, but not working

myApp.controller("docsCtrl", ["$scope", "$location", "$http", "adalAuthenticationService",
    function docsCtrl($scope, $location, $http, adalAuthenticationService) {

        "use strict";

        angular.element("title").text("Documents");

        debugger
        if (adalAuthenticationService.userInfo.isAuthenticated) {
            $scope.message = "Welcome. You are logged in as " + adalAuthenticationService.userInfo.userName;
        }
        else{
            $location.path("/");
        }


        $http({
              //url: "https://graph.microsoft.com/v1.0/me/drive/root/children",
              //url: "https://TenentName-my.sharepoint.com/_api/v1.0/me/files",
                url: "https://TenentName.sharepoint.com/sites/subsiteName/_api/Web/Lists/GetByTitle('CustomListName')/Items?$select=Title",
            params: {
                "$select": "id,name,lastModifiedBy,size,webUrl"
            },
            method: "GET",
            headers: {
                "accept": "application/json",
            }
        }).success(function (data) {

            var docs = new Array();
            var files = data.value;
            for (var count = 0; count < files.length; count++) {
                var item = files[count];

                docs.push({
                    name: item.name,
                    size: item.size,
                    link: item.webUrl,
                    lastModifiedBy: item.lastModifiedBy.user.displayName.split(',')[0]
                });
            }
            debugger
            $scope.documents = docs;
            $scope.message = "Returned " + docs.length + " document(s).";

        }).error(function (data) {
            $scope.message = JSON.stringify(data);
        });

    }
]);

home.html : here is my task,have to get all the below input form data & add it as sharepoint list item after clicking the save button. Below fields will act as a field names for a single list item.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>    
    <div id="container">
        <div align="center">
            <img src="../images/logo.gif" />
            
            <h1>Application Form for New Investment Permit</h1>
            <h2>{{message}}</h2>
        </div>
        
        <form id="contactform">
            <h2 align="center">Application Form for Investment Permit</h2>
            <h3>Particulars of the Applicant /Investor</h3>
            <table>
                <tr>
                    <td>Title</td>
                    <td><input type="text" id="Title" /></td>
                </tr>
                <tr>
                    <td>EmpNo</td>
                    <td><input type="text" id="EmpNo" /></td>
                </tr>
                <tr>
                    <td>EmpName</td>
                    <td><input type="text" id="EmpName" /></td>
                </tr>
                <tr>
                    <td>Location</td>
                    <td><input type="text" id="Location" /></td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td><input type="text" id="Age" /></td>
                </tr>
                <tr>
                    <td>Experience</td>
                    <td><input type="text" id="Experience" /></td>
                </tr>
                <tr>
                    <td>EntryOn</td>
                    <td><input type="text" id="EntryOn" /></td>
                </tr>
            </table>
            <div>
                
                <button type="submit" onclick="">Save</button>
            </div>
            </form></div>
</body>
</html>

docs.html

<div class="row">
    <div class="col-md-4">Name</div>
    <div class="col-md-4">Size</div>
    <div class="col-md-4">Modified By</div>
</div>
<div class="row" data-ng-repeat="document in documents">
    <div class="col-md-4"><a data-ng-href="{{document.link}}">{{document.name}}</a></div>
    <div class="col-md-4">{{document.size}}</div>
    <div class="col-md-4">{{document.lastModifiedBy}}</div>
</div>
<div style="margin-top:15px;">{{message}}</div>

Finally my index.html is as below

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="MyApp">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <title>Hello, ADAL JS</title>
    <link rel="stylesheet" href="Content/bootstrap.css" />
    <link rel="Stylesheet" href="Content/site.css" />
   
</head>
<body>
    <div class="container" data-ng-cloak>
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Hello ADAL JS!</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#documents">Documents</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="container" data-ng-view />
    </div>

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery-extensions.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/adal.js"></script>
    <script src="Scripts/adal-angular.js"></script>
    <script src="Scripts/App_Start/App.js"></script>
    <script src="Scripts/Controllers/homeCtrl.js"></script>
    <script src="Scripts/Controllers/docsCtrl.js"></script>

</body>
</html>

Using the above code, i can able to authenticate the app.But using the same authContext not able to add items in the Sharepoint Online list.

In fact am blank to move further...i.e how to add list items using the same context.Am struck here.

Since,5days i googled it...but nothing suited as per our requirement.Please help me,thanks in advance.

What I have tried:

tried to connect through SPServices
Now working with Adal.js