CODEWITHSUNDEEP
checkboxember.js
bookthief
bookthief

Reputation: 2451

How to get form data from ember checkboxes

I have an ember application with two models, user and subject. Each user has a number of subjects associated with them. I have a user/create template in which you can input a new users details, ie their name, email address and associated subjects. The subjects are selected from a list of checkbox values, driven by the subjects in the subject controller. My problem is that when I click on save, the controller seems to skip over the subject selection and doesn't add them to the JSON payload. Can anyone help?

Create Template:

<script type = "text/x-handlebars" id = "user/create">
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">New User</h4>
      </div>
      <div class="modal-body">
<div class = "input-group">
<form>

  <h5>First Name</h5>
  {{input value=firstName}}

  <h5>Last Name</h5>
  {{input value=lastName}}

  <h5>Email</h5>
  {{input value=email}}

  <h5>Subjects</h5>

{{#each subject in subjects}}
  <label>
        {{view Ember.Checkbox Binding="id"}}
        {{subject.name}}
    </label><br />
{{/each}}

</form>
</div>
      </div>
      <div class="modal-footer">

        <a {{action close target="view"}} href="#" class="btn btn-default">Cancel</a>
        <a  data-dismiss="modal" {{action "save"}} class="btn btn-primary">Save changes</a>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</script>

UserCreateView:

App.UserCreateView = Ember.View.extend({
  didInsertElement:function(){
    $('#createModal').modal('show');
    var self = this;
    $('#createModal').on('hidden.bs.modal', function (e) {
  self.controller.transitionToRoute("users");
});
  },
  actions:{
    close:function(){
      this.$(".close").click();

    },
    save: function(){
        alert('(in view) saved in view');
      this.controller.send("save");
      self.controller.transitionToRoute("users");
      this.$(".close").click();
      $('#createModal').modal('hide');

    }
  },
)};

CreateController:

App.UsersCreateController = Ember.ObjectController.extend({
      subjects: function() {
    return this.store.find('subject');
  }.property(),

      actions: {

        save: function(){
          alert('(UsersCreateController) SENDING A POST REQUEST');
          var newUser = this.store.createRecord('user', this.get('model'));
          console.log("newUser", newUser);
          newUser.save();

          this.transitionToRoute('users');
           $('#createModal').modal('hide');
        }
      }
    });

Upvotes: 0

Views: 1354

Answers (1)

cvny
cvny

Reputation: 38

The first thing I would look at is the binding attribute you are using on your checkbox(es). For non-checkbox or {{input}} you bind via the value attribute. BUT - for checkboxes you must bind on the "checked" attribute.

Take a look at http://emberjs.com/guides/templates/input-helpers/ - about halfway down under Checkboxes for more info, it will show the accepted attributes, etc.

I experienced the same issue wherein this:

{{input  type="checkbox" class="input-small" id="inputCache" value=cache}}

did not work with regard to passing in the checkbox-values to the action handling the submit (other values were passed in and persisted fine), whereas simply changing the attribute to this:

{{input  type="checkbox" class="input-small" id="inputCache" checked=cache}}

solved the entire problem.

Hopefully this will do the trick. Good luck :-)

Upvotes: 2

Related Questions