how emberjs get form values in a object?

Question

templates/module.hbs

<form class="" method="post" {{ action "step1" on="submit"}}>
{{input type="email" value=email}}
{{input type="checkbox" checked=permission}}
{{input type="submit" value="next"}}
</form>

how can i reach email and checkbox value in a object (like model.email and model checkbox ) in Route

routes/module.js

export default Ember.Route.extend({
model() {
    return this.store.createRecord('wizard');
},
actions: {
  step1(){
     alert(this.controller.get('model.email')); // returns undefined
     // get form values like model.email model.checkbox
  },
}

models/wizard.js

export default DS.Model.extend({
  email: DS.attr('string'),
  permission: DS.attr('boolean')
});

Update: [[ alerts returns undefined ]]

Answer 1

In case you do not want to use a model for the simplest request, you can use jQuery's serialize method.

btnQueryClicked() {
  const $form = $('.bar-query-query');
  const params = $form.serializeArray();

  // convert parameters to dictionary
  const paramsDict = {};
  params.forEach((param) => {
    paramsDict[param['name']] = param['value'];
  });

  $.post('/query', paramsDict)
    .done((data) => {
      console.log(data);
    });
},

Code above is what I use to make a simplest query request for data display purpose only. (It is not that elegent but you get the idea)

It is too heavy to me to create a model only for a simple request which does not need to be persistent anyway.

Answer 2

First you will have to create model. let's say you are working on model user

//routes/module.js
export default Ember.Route.extend({
  model() {
    return this.store.createRecord('wizard');
  },
  actions: {
    step1(){
     this.controller.get('model.email')// you will get email value here.
     // get form values like model.email model.checkbox
    }
}

then in template you have to use in the same format

//templates/module.hbs
<form class="" method="post" {{ action "step1" on="submit"}}>
{{input type="email" value=model.email}}
{{input type="checkbox" checked=permission}}
{{input type="submit" value="next"}}
</form>