Handling multiple checkbox array in Ember.js

Question

Here is the thing I have a form which have multiple checkboxes and they have the same name attribute "classifications[]"

with the code:

<input type="checkbox" name="classification[]" value="Value 1" />
<input type="checkbox" name="classification[]" value="Value 2" />
<input type="checkbox" name="classification[]" value="Value 3" />

this works properly by default it posts "classification[]" like this

[ 0 => "Value 1", 1 => "Value 2"]

but I want this to work in an ember app so I did this (shortened version)

// index.html
{{input type="checkbox" name="classification[]" value="Cell Member" checked=classification}}

App.ApplicationController = Ember.Controller.extend({
  var user = this.store.createRecord('user',{
  classification: this.get("classification")
})
  user.save();
})

App.User = DS.Model.extend({
 classification: DS.attr("string")
});

but the only posted classification value is True..

Your question is not clear to me. What you are doing in this code is{{input type="checkbox" name="classification[]" value="Cell Member" checked=classification}} that whenever you tick the checkbox, a boolean property called classification will be set to true. Look here to see the documentation of checkbox. emberjs.com/guides/templates/input-helpers .Looks like there is no value property in Ember checkbox input. You can set the value to whatever you want before posting the data, based on the boolean property in {{input}}. — Pranava Sheoran
– Pranava Sheoran, Commented Apr 10, 2014 at 15:34
the thing is if I use this code <input type="checkbox" name="classification[]" value="Value 1" /> this doesn't set the value classification: this.get("classification") so I get an Undefined Value for classification how do you propose to get the string value from checkbox only if its checked, I need multiple values in the same name? much like Ember.Select multiple=true sorry got stuck with this for hours — periabyte
– periabyte, Commented Apr 10, 2014 at 16:11

g13013 · Accepted Answer · 2014-04-13 12:41:14Z

3

try this

// index.html
{{#for possibleValues}}
    <label>{{this.label}}</label>
    {{input type="checkbox" value=this.isChecked}}
{{/for}}
<a {{action save}}>save</a>

var possibleValue = [{
    label: 'Label for value 1',
    isChecked: false,
    value: 'Value 1'
  },{
    label: 'Label for value 2',
    isChecked: false,
    value: 'Value 2'
  },{
    label: 'Label for value 3',
    isChecked: false,
    value: 'Value 3'
  }];

App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend();
App.ApplicationController = Ember.ObjectController.extend({
  init: function () {
    this._super();
    var user = this.store.createRecord('user');
    this.set('content', user);
  },
  actions:{
    save: function () {
      var user = this.get('content'),
          collected = user.get('classifications');
      this.set('collected', collected);
      user.save();

     }
  },
  //executes when isChecked is changed in one item of possibleValues
  collectChecked: function () {
    var classifications;
    classifications = this.get('possibleValues').filterBy('isChecked', true); //filter checked only 
    classifications = classifications.mapBy('value'); //map values
    this.set('classifications', classifications);
    console.log(classifications);
  }.observes('[email protected]'),
  possibleValues: possibleValues
});

App.RawTransform = DS.Transform.extend({
  deserialize: function(serialized) {
    return serialized;
  },
  serialize: function(deserialized) {
    return deserialized;
  }
});

App.User = DS.Model.extend({
  classifications: DS.attr('raw')
});

http://jsbin.com/dokiwati/6/edit

edited Apr 13, 2014 at 12:41

answered Apr 10, 2014 at 19:02

g13013

3152 silver badges11 bronze badges

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

2 Comments

periabyte Over a year ago

tried it here link still the post data is still empty, but somehow it gave me an idea, thanks.. I'm still no marking this as answer maybe someone will give much better answer but still thank you

periabyte Over a year ago

yes saw it few days ago and marked it as an answer though I might need a new implementation as I figured doing this might not be very good if someday the application goes a little larger, but thanks anyway

Collectives™ on Stack Overflow

Handling multiple checkbox array in Ember.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related