JSFiddle - React, Tailwind, and code Playground
by Kishore Barik
HTML
<!DOCTYPE html>
<html ng-app="demoApp">
<body ng-controller="demoController">
<h2>Test Form</h2>
<form action="" method="post" id="formid" name="testForm">
First Name:
<input type="text" ng-model="formData.Fname" maxlength="50" size="12" /><br/>
<br/> Last Name:
<input type="text" ng-model="formData.Lname" maxlength="50" size="12" /><br/>
<br/>
Middle Name:
<input type="text" ng-model="formData.Mname" maxlength="50" size="12" /><br/>
<br/> Education:
<br/>
<select ng-model="formData.Education">
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<br/>
<br/> Age:
<input type="text" ng-model="formData.Age" maxlength="2" size="10" /><br/>
<br/> University:
<br/>
<select ng-model="formData.University">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
</select>
<br/>
<br/>
Companies:<br/>
<select ng-model="formData.companies">
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option></select><br/>
<p>
<input type="submit" ng-click="serialize($event)" />
</p>
</form>
</body>
</html>
JavaScript
var app = angular.module('demoApp', []);
app.controller('demoController', function($scope) {
$scope.formData = {};
/*** Initialization *****/
$scope.formData.Fname = 'Kishore';
$scope.formData.companies = 'Y'
$scope.serialize = function($event){
console.log($scope.formData)
alert(JSON.stringify($scope.formData))
console.log(JSON.stringify($scope.formData));
$event.preventDefault()
}
});
//Output like: {"Fname":"myfirstname","Lname":"mylastname","Mname":"mymiddlename","Education":"HighSchool","Age":"25","University":"ABC","companies":"X"}
//But my desired output json should look like thism how can I get it?: testjson = {"testing": {"Fname": myfirstname, "Lname": mylastname, "Mname": "mymiddlename", "Education": HighSchool, "Age": 25}, "University": "ABC", Companies": "X" };