I am learning angularJS now a days. How can I create a json object for my given html form. I can do it with jQuery, but I need to do this in AngularJS, kindly let me know that how can I do this in angularJS and Thanks in advance.
-
How is this specific to Angular? Are you using jQuery in your project? See this: stackoverflow.com/questions/11661187/…user1425689– user14256892016-04-05 11:24:10 +00:00Commented Apr 5, 2016 at 11:24
-
@Roope, I need to create json object with AngularJS instead of with jQuery, is there any way to create with AngularJS only ?Dhana– Dhana2016-04-05 11:27:03 +00:00Commented Apr 5, 2016 at 11:27
-
@Dhana JQuery lite is built-in with AngularJS. So doing it with jQuery when in Angular universe won't harm.Himel Nag Rana– Himel Nag Rana2016-04-05 11:32:07 +00:00Commented Apr 5, 2016 at 11:32
-
@Dhana, you might be interested in: stackoverflow.com/questions/12141035/…Himel Nag Rana– Himel Nag Rana2016-04-05 11:33:31 +00:00Commented Apr 5, 2016 at 11:33
Add a comment
|
2 Answers
Better without serialize you can do like this using ng-model.
var app = angular.module('demoApp', []);
app.controller('demoController', function($scope) {
$scope.formData = {}
$scope.serialize = function($event){
console.log($scope.formData)
alert(JSON.stringify($scope.formData))
$event.preventDefault()
}
});<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js" ></script>
</head>
<body ng-controller="demoController">
<h2>Form</h2>
<form action="" method="post" id="formid" name="testForm">
First Name:
<input type="text" ng-model="formData.Fname" maxlength="50" size="12" />
<br/> Last Name:
<input type="text" ng-model="formData.Lname" maxlength="50" size="12" />
<br/> Select a Level of Education:
<br/>
<select ng-model="formData.education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<br/>
<p>
<input type="submit" ng-click="serialize($event)" />
</p>
</form>
</body>
</html>
Comments
I dont see a need to serialize form data we can set a object in controller and add model as properties in to it. Here is the Codepen.
View :
<form name="contactForm" class="col-md-6" ng-app="app" ng-controller="bodyCtrl">
<div class="form-group">
<label for="exampleInputEmail1">Firstname</label>
<input type="text" class="form-control" ng-model="simpleForm.first_name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Lastname</label>
<input type="text" class="form-control" ng- model="simpleForm.last_name">
</div>
<div class="form-group">
<select class="form-control" name="" id="" ng-options="option.value as option.label for option in educationOptions" ng- model="simpleForm.education">
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="toggleShow()">Submit</button>
<pre ng-hide="!show">
<code>
{{simpleForm|json}}
</code>
</pre>
Controller :
var app = angular.module('app', []);
app.controller('bodyCtrl', function($scope) {
$scope.show = false;
$scope.simpleForm = {};
$scope.educationOptions = [{
'label': 'Jr.High',
'value': 'Jr.High'
}, {
'label': 'HighSchool',
'value': 'HighSchool'
}, {
'label': 'College',
'value': 'College'
}]
$scope.simpleForm.education = $scope.educationOptions[0].value;
$scope.toggleShow = function() {
$scope.show = !$scope.show
}
})
You might want to refer to this link for more on data binding.And this one if you are coming from jQuery background.
