AngularJS - submit form with checkboxes via ajax

Question

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 ?

Are you sure you know what "asynchronous" means? It doesn't seem to be relevant. — m59
– m59, Commented Nov 29, 2013 at 6:36
@m59 Should I say ajax? But anyway the problem is not related with ajax/async. — Lekhnath
– Lekhnath, Commented Nov 29, 2013 at 6:37

m59 · Accepted Answer · 2013-11-29 07:14:55Z

3

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.

edited Nov 29, 2013 at 7:14

answered Nov 29, 2013 at 7:03

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

m59 Over a year ago

Note that I accidentally used a $ on data in my function. I've been writing too much php, lol. It has no significance :)

Collectives™ on Stack Overflow

AngularJS - submit form with checkboxes via ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related