AngularJS: How to call function on onsubmit inside the controller as ng-submit

Question

I am developing mobile app in angularJS, ionic framework and cordova. I am having a scenario where form data i am submitting to server and when server respond me with the status as 200 i am navigating user to the confirmation page. My code is:

<ion-view title="Fill the Form" ng-controller="formSubmit">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
    <form name="fieldForm" id="{{htmlValue.Id}}" method="post" onsubmit="submitFormData($(this).serialize(), $(this).attr('id'))">
        <div class="bootstrap" ng-bind-html="htmlValue.Html | unsafe">

        </div>
        <div class="padding">
            <button  class="button button-block button-calm">
                Submit
            </button>
        </div>
    </form>

    <div class="clearfix"></div>
</ion-content>

The function i have written below the index.html page before the body ends.

<script type="text/javascript">
    function submitFormData(serializedData,value){
        var data = serializedData;
        $.ajax({
            url: base_url+"put/putFormFilledRawData.php?id="+value,
            type: "POST",
            data: data,
            success: function(tableData){
                alert('success');
            }});
        return false;
    };
</script>

Thing is when response arrives as 200 i have to navigate through $state.go() function and for that this function needs to be accessed inside the controller. For that i tried ng-submit at the place of onsubmit but is always shows me error: submitFormData is not a function. How to make it work inside controller from front view forms submit call?

Solution 1

The more angular way of doing it is following:

HTML :

    <ion-view title="Fill the Form" ng-controller="formSubmit">
    <ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
        <form name="fieldForm" id="{{htmlValue.Id}}" ng-submit="submitFormData(htmlValue)">
            <div class="bootstrap" ng-bind-html="htmlValue.Html | unsafe">

            </div>
            <div class="padding">
                <button  class="button button-block button-calm">
                    Submit
                </button>
            </div>
        </form>
    <div class="clearfix"></div>
</ion-content>

Controller :

angular.module('formSubmitModule', [])
        .controller('formSubmit', ['$scope', function($scope, $http) {
          $scope.HTML = []; //Assuming you are getting the array of objects here


    $scope.submitFormData= function(formObj) {
$http({
    url: '/someUrl', 
    method: "POST",
    params: {paramA: valueA, paramB: valueB}
 });
};

(Another flavour of $http service to pass the params in the URL)

This is how you should be making the ajax call and POST the form data in angularJS.

P.S. You can also explore the 'promises' that are returned by the $http service of the angularjs rather then dealing with success and error callbacks.

Solution 2

Look at the documentation of ng-submit

You need to create a controller or a directive and bind the function to the $scope.

Solution 3

Check below example

<script>
    angular.module('submitExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.list = [];
          $scope.text = 'hello';
          $scope.submit = function() {
            if ($scope.text) {
              $scope.list.push(this.text);
              $scope.text = '';
            }
          };
        }]);
    </script>


<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>

Comments

[Shaggie]

look the for is dynamic one i don't have any idea with whatever fields and what type of fields it will contain. That is why i have used serialize() function

[Tobias Timm]

your submit method needs to be in the formSubmit controller. Can you post the code of the 'formSubmit' controller you defined in the ng-controller tag? like @Mico did

[Shaggie]

okk.. but i am not getting the posted data. I need that one in serialized format. not i am getting even the if. I am using ng-submit so jquery is not working here

[Shaggie]

how can i use the posted data inside the form which i am showing using ng-bind-html="htmlValue.Html | unsafe" that i am getting with $(this).serialize() if i have to use ng-submit?

[Vaibhav Pachauri]

You dont even have to serialize the form object. $http service does take care of the json data-type object. Just pass the complete object in the $http service.

[Shaggie]

i want to send the data to my server in serialize format like key1=value&key2=value2&key3=value3....like wise. How can i achieve that just that is remaining otherwise your answer is perfect one

[Vaibhav Pachauri]

Use $http service as following : $http({ url: /someURL, method: "POST", params: {paramA: 'A', paramB : 'B'} });

[Shaggie]

My friend that is what my concern. PI even dont know the paramA & paramB. the form inupt names are defined at the type of creating the form and it is dynamic. So i will not be knowing what is the paramA & paramB infact there may bee 100 of input fields..... I just want to post the data to the server in serialize format when form will get submit. how can i capture that in angularJS?. In php i usually write action="url" and the data will be posted to the url how do i capture the same in angularJS. at my server side PHP is there so no issue. Just i need to serialize data

[Vaibhav Pachauri]

If there can be 100's of parameters then you should not be providing them in the URL, instead POST it in the body of the RESTfull call.

[Mark Chorley]

this is copied and pasted from the angular documentation for ng-submit: docs.angularjs.org/api/ng/directive/ngSubmit

[Shian JA]

Is there something we can't copied if he required a solution so i just provided