AngularJS - submit form with checkboxes via ajax

angularjs, forms, javascript

Solution

I don't see any reason for the "name" attribute here. You need to use `ng-click` with a function to save your data - and that should be taken care of by a service. There's a lot you can do with angular...search the docs for anything you're doing (see checkboxes in the docs, for example).

Live demo here (click).

<div ng-controller="UserController">
Favourite Beverage :
<label>
  <input type="checkbox" ng-model="formData.beverages[0]" ng-true-value="coffee">Coffee
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[1]" ng-true-value="tea">Tea
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[2]" ng-true-value="colddrinks">Cold Drinks
</label>

<button ng-click="save()"> Send </button>
</div>

js:

var app = angular.module('myApp', []);

app.factory('myService', function($http) {
  var myService = {
    save: function(data) {
      //your ajax call here
      console.log(data);
    }
  };
  return myService;
});

app.controller('UserController', function($scope, myService) {
  $scope.formData = {};
  $scope.formData.beverages = [];
  $scope.save = function() {
    myService.save($scope.formData);
  };
});

Also, you should probably have all of your data (the drink values, for example) in your javascript rather than the html, then bind it to the page. Or in the database, then into js, then onto the page. That all depends on how dynamic your information needs to be - just be sure to think ahead.

Problem

I have a form with `checkboxes` and other input fields. The `data-ns-form` directive is used for submitting form data via ajax. The controller for this form is `UserController`. HTML ``` <div ng-controller="UserController"> <form data-ns-form="formData"> Full Name : <input type="text" name="fullname" ng-model="formData.fullname" /> Favourite Beverage : <label> <input type="checkbox" name="beverages[]" ng-model="formData.beverages[0]" value="coffee"> Coffee </label> <label> <input type="checkbox" name="beverages[]" ng-model="formData.beverages[1]" value="tea"> Tea </label> <label> <input type="checkbox" name="beverages[]" ng-model="formData.beverages[2]" value="colddrinks"> Cold Drinks </label> <button type="submit"> Send </button> </form> </div> ``` Controller ``` app.controller('UserController', function($scope){ $scope.formData = {fullname : '', beverages : []}; }); ``` Directive ``` app.directive('nsForm', function(){ return { restrict : "A", scope: { formData : "=nsForm" }, link : function(scope, iElem, iAttr) { $(iElem).on('submit', function(e) { e.preventDefault(); console.log("FORM DATA"); console.log(scope.formData); }); } } }); ``` A little description When I submit the form I get boolean TRUE for checked checkboxes, but instead I want the value inside the value attirbute. For instance, If I checked 'coffee' and 'Cold Drinks', I get `beverages=[true,false,true]`, but what do I want is `beverages['coffee','colddrink']`. What is the `AngularJS` way of doing it? And Also. Is there any `preferred` way of submitting form in `AngularJS` instead of creating `directives` myself ?

Original source