Radio and Checkbox use in Angularjs Post method

Hi Geeks,

When I was working with angular form posts then I was tried radio and checkboxes as normal inputs in angular js form post then it is sending [Object Object] to the webservices and that object couldn’t be parsed by the server-end , and also inserted [Object Object] text into the database also.

But I need to send the controls in key val pair So I Write following code written to sent it, These are the steps which I follow to achieve it.

First I created the Html controls like this :

<!— html radio box for item condition —>

Now in your Controller ‘s submit function ( I am assuming that you have already go through my previous article for form process in angular js or you already aware with form processing in angular js ) as following:

//collect the radio opted value data in a var var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value //collect the checkboxes data in a var with comma seperated var checked_items=””; angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=”,“+key; });

Now complete post action inside the respective controller will look like this

$scope.submit_form = function() { $http({ url: base_url+“services.do/add_business”,//or your service url method: “POST”, processData: false, headers: { ‘Content-Type’: undefined }, data : $scope. postAdd,//it will get all other normal text or select inputs in the form form using common modal >> postAdd
transformRequest: function (data) { var formData = new FormData(); //collect the radio opted value data in a var var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value formData.append(“item_condition”, single_option); //collect the checkboxes data in a var with comma seperated var checked_items=””; angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=”,“+key; }); formData.append(“item_types”, checked_items); return formData;
}, }).success(function(data, status, headers, config) { //success callback, show success or alert depends on return data in first callback response named > data console.log(“form submitted successfully”); }).error(function(data, status, headers, config) { //error callback here console.log(“Error in form process”); });

}

you can ask any confusion and if something not clear then put your query in comments , i will type to reply on same and try to resolve your problem where you stucked