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?

Answer 1

Look at the documentation of ng-submit

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

Answer 2

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>

Answer 3

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.