AngularJS: how to call onsubmit function inside controller as ng-submit
I am developing a mobile app in angularJS, ionic framework and cordova. I have a scenario where I submit form data to the server, and when the server replies to me with a 200 status, I view the user on the confirmation page. My code:
<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>
The point is that when the response comes like 200, I have to navigate through the $ state.go () function, and for that this function must be available inside the controller. For this, I tried ng-submit at the onsubmit location, but it always shows me an error: is submitFormData
not a function. How do I get it to work inside a controller from the form submission forms, send the call?
source to share
The more angular does this, the lower:
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 flavor of $ http service for passing parameters in url)
This is how you should make ajax call and POST form data in angularJS.
PS You can also look into the "promises" that are returned by the $ http service for angularjs, rather than dealing with successful callbacks and errors.
source to share
Example below
<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>
source to share