Twitter API Question posted in
The official Twitter API documentation can be found here.

multiple form data submit at once – Twitter API

I have got forms each laying in a collapsible panel wrapper in a page. Each of my forms are comprised of 3 or 4 form groups. Every one form of is controlled by a controller block. And finally, I have got different function blocks for each form groups.

Currently, once the fields are created and getting filled up, form group creates a .json file dynamically. (You can see this being in this .gif here: DYNAMICALLY CREATED JSONS)

I have got an API, written in PHP; I’m sharing how insert and select work in .gif format as well respectively.(Currently api uses GET for everything in order to test it easily, so don’t get surprised I’m aware of it.) ( INSERT, SELECT AFTER INSERTION )

What I need to do is, to post these to DB and committing at once if there’s no error on aggregate of all JSONs and warn the user before commit if there’s an error.

So hence, my question is how can I write a submit function that achieves to post these JSONs.

Below you can find my codes in snippet, it is not working here of course; but I’m sharing since I need a solution. At the end of my controller, I have a function named submitKisiIletisimBilgileri which currently concatenates all the JSONs and logs to the console. Instead of this, it needs to perform post by calling LocationService.AddField() a few times with different parameters. But I could not shape that part of my code; that is where I need help. 🙂

app.controller('KisiIletisimBilgileri', ["$scope", "LocationService", function ($scope, LocationService) {

    $scope.phones = [{
        type: '',
        tel: ''
    }];
    $scope.addNewPhoneNumber = function () {
        $scope.phones.push({
            'type': '',
            'tel': ''
        });
        //  console.log(dataPhones);
    };
    $scope.removePhoneNumber = function (x) {
        // var lastItem = $scope.phones.length - 1;
        var index = $scope.phones.indexOf(x)

        if ($scope.phones.length > 1) //Never delete last one
            $scope.phones.splice(index, 1);
    };
    var dataPhones = $scope.phones;

    //Email Variables
    $scope.EmailTypeId = null;
    $scope.EmailTypeList = null;
    //Email Object & Functions
    $scope.mails = [{
        //id: '1',
        type: '',
        email: ''
    }];
    $scope.addNewEmailAddress = function () {
        //var newItemNo = $scope.mails.length + 1;
        $scope.mails.push({
            //'id': '' + newItemNo,
            'type': '',
            'email': '' //+ newItemNo
        });
    };
    $scope.removeEmailAddress = function (x) {
        // var lastItem = $scope.mails.length - 1;
        var index = $scope.mails.indexOf(x)

        if ($scope.mails.length > 1) //Never delete last one
            $scope.mails.splice(index, 1);
    };
    var dataMails = $scope.mails;

    //Media Variables
    $scope.MediaTypeId = null;
    $scope.MediaTypeList = null;
    //Media Object & Functions
    $scope.media = [{
        //id: '1',
        type: '',
        sma: ''
    }];
    $scope.addNewSMAccount = function () {
        //var newItemNo = $scope.media.length + 1;
        $scope.media.push({
            //'id': '' + newItemNo,
            'type': '',
            'sma': '' //+ newItemNo
        });
    };
    $scope.removeSMAccount = function (x) {
        // var lastItem = $scope.media.length - 1;
        var index = $scope.media.indexOf(x)

        if ($scope.media.length > 1) //Never delete last one
            $scope.media.splice(index, 1);
    };
    var dataMedia = $scope.media;

    $scope.submitKisiIletisimBilgileri = function () {

        var data = new Array();
        data.push(dataPhones);
        data.push(dataMails);
        data.push(dataMedia);

        /* post to server*/
        console.log(data);

    }



}]);
app.factory('LocationService', ["$http", function($http) {

    var fac = {};
    fac.AddField = function(q, t, c0, v0, c1, v1, c2, v2) {
        return $http.get('assets/api/kisiduzenle.php?q=' + q + '&t=' + t + '&c[0]=' + c0 + '&v[0]=' + v0 + '&c[1]=' + c1 + '&v[1]=' + v1 + '&c[2]=' + c2 + '&v[2]=' + v2);
    }
    return fac;
}]); //factory
<div class="panel panel-white" id="paneliletisimbilgileri">
    <div class="panel-heading">
        <h4 class="panel-title text-primary">Kişi İletişim Bilgileri</h4>
        <ct-paneltool class="panel-tools" tool-collapse="tool-collapse"></ct-paneltool>
    </div>
    <div uib-collapse="paneliletisimbilgileri" ng-init="paneliletisimbilgileri=false" class="panel-wrapper">

        <form role="form" class="form-horizontal" ng-controller="KisiIletisimBilgileri">

            <!--PHONES-->

            <div class="form-group" data-ng-repeat="block in phones">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    Phone Number
                </label>
                <div class="col-sm-1">
                    <!--
                    <select class="form-control" ng-model="PhoneTypeId" ng-options="PhoneTypeList.COUNTRY_ID as PhoneTypeList.NAME for PhoneTypeList in PhoneTypeList" ng-change="GetPhoneType()">
                        <option value="" disabled="">Seçiniz</option>
                    </select>
-->
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Aktif">Aktif</option>
                                <option value="İş">İş</option>
                                <option value="Kişisel">Kişisel</option>
                                <option value="Cep">Cep</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">

                    <input type="text" ng-model="block.tel" id="adsoyadunvan" class="form-control underline" name="masked" ui-mask="(999) 999-9999" placeholder="(999) 999-9999">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removePhoneNumber(block)"></i> </button>
            </div>
            <div id="phonesDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewPhoneNumber()"></i> </button>
                <br>{{ phones }}
            </div>
            <!--PHONES-->

            <!--MAILS-->
            <div class="form-group" data-ng-repeat="block in mails">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    E-mail
                </label>
                <div class="col-sm-1">
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Aktif">Aktif</option>
                                <option value="İş">İş</option>
                                <option value="Kişisel">Kişisel</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">
                    <input type="email" ng-model="block.email" id="adsoyadunvan" class="form-control underline" name="masked" placeholder="[email protected]">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeEmailAddress(block)"></i> </button>
            </div>
            <div id="mailsDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewEmailAddress()"></i> </button>
                <br>{{ mails }}
            </div>
            <!--MAILS-->

            <!--SOCIAL MEDIA-->
            <div class="form-group" data-ng-repeat="block in media">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    Social Media Account
                </label>
                <div class="col-sm-1">
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Facebook">Facebook</option>
                                <option value="Twitter">Twitter</option>
                                <option value="Instagram">Instagram</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">
                    <input type="text" ng-model="block.sma" id="adsoyadunvan" class="form-control underline">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeSMAccount(block)"></i> </button>
            </div>
            <div id="mediaDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewSMAccount()"></i> </button>
                <br>{{ media }}
            </div>
            <!--SOCIAL MEDIA-->
            <div>
                <button class="col-md-offset-4 btn btn-green" href="#"><i class="fa fa-paper-plane" ng-click="submitKisiIletisimBilgileri()"></i> </button>
            </div>

        </form>


    </div>

</div>

EDIT 1: I have updated my submit function as below

$scope.submitKisiIletisimBilgileri = function () {
    $scope.myForm.$setSubmitted();
    if ($scope.myForm.$invalid) {
        alert("There's something invalid in one of the forms!");
    } else {
        ///api/kisiduzenle.php?q=add&t=telefon&c[0]=KISILIK_ID&v[0]=119486&c[1]=TELEFON&v[1]=888888888&c[2]=TIP&v[2]=W
        var urlParams = {
            q: 'add',
            t: 'telefon',
            c0: 'KISILIK_ID',
            v0: '119486',
            c1: 'TELEFON',
            v1: '8888888888',
            c2: 'TIP',
            v2: 'W'
        }

        var data = new Array();
        data.push(dataPhones);
        data.push(dataMails);
        data.push(dataMedia);

        LocationService.AddField(urlParams, data);
    }
}

EDIT 2: While my function in my LocationService is like this..

  fac.AddField = function (urlParams, formData) {
    var request = {
        method: 'GET'
        url: 'assets/api/kisiduzenle.php?q=' + urlParams.q + '&t=' + urlParams.t + '&c[0]=' + urlParams.c0 + '&v[0]=' + urlParams.v0 + '&c[1]=' + urlParams.c1 + '&v[1]=' + urlParams.v1 + '&c[2]=' + urlParams.c2 + '&v[2]=' + urlParams.v2
        data: formData,
        headers: {
            'Content-Type': 'application/json'
        }
    }
Tags:

2

Answers


  1. 0

    I’m not really familiar with angular but… Why not use jQuery inside your function?

    var formData = $( "#testform" ).serialize();

    Login or Signup to reply.
  2. 0

    Firstly you should name your form to get access from your controller. Optionally use ngForm directive for nested forms – https://docs.angularjs.org/api/ng/directive/ngForm – it’s really helpfull. If one of your nested forms is invalid, then your parent form is also invalid.

    <form name="myForm">
<!-- first nested form -->
   <div ng-form="firstNestedForm">
   </div>
<!-- second nested form -->
   <div ng-form="secondNestedForm">
   </div>
<!-- etc. -->
   ...
</form>

    Afterwards update your function submitKisiIletisimBilgileri to look like this

    $scope.submitKisiIletisimBilgileri = function () {
    $scope.myForm.$setSubmitted();
    if($scope.myForm.$invalid){
       // alert user
    }else{
      // gather your forms data and post it to server
    }
}

    It is important to properly set your form, because $scope.myForm.$invalid depends on it. If there won’t be any validators on your inputs etc. or required attribute, then your form will be always valid.

    Read more here https://docs.angularjs.org/api/ng/type/form.FormController and
    https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

    Your $http request should look like this

    var request = {},
    formData = {data: []};

formData.data.push(dataPhones);
formData.data.push(dataMails);
formData.data.push(dataMedia);

request = { 
  method: 'POST'                 // or GET... it depends on you API
  url: 'http://myapi.com/form'   // your API url
  headers: {
     'Content-Type': 'application/json'   // here you can place authorization token etc.
  },                     
  data: formData                 // your form data to post on server
}

$http(request).then(function(response){
   // do something on success
},function(error){
   // do something on error
});

    or using your LocationService

    app.factory('LocationService', ["$http", function($http) {
    var fac = {};
    fac.AddField = function(formData) {
        var request = {
            method: 'GET',
            url: 'assets/api/kisiduzenle.php',
            params: formData
        }

        return $http(request);
    }
    return fac;
}]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search