# Load results from database in select box onchange event

**URL:** https://discuss.emberjs.com/t/load-results-from-database-in-select-box-onchange-event/12563
**Category:** Uncategorized
**Created:** [March 10, 2017, 9:40am UTC](https://discuss.emberjs.com/t/load-results-from-database-in-select-box-onchange-event/12563 "2017-03-10T09:40:35Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![mahaniff](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@mahaniff](https://discuss.emberjs.com/u/mahaniff)
#### Post date: [March 10, 2017, 9:40am UTC](https://discuss.emberjs.com/t/load-results-from-database-in-select-box-onchange-event/12563/1 "2017-03-10T09:40:35Z")

</div>

hi guys

Can anyone guide me how to load data from database when i change the value on the select box? i came up with a solution but its not working.

my component.js

actions:{ filterStudent(){ let filterInputValue = this.get(‘value’); console.log(filterInputValue); let filterAction = this.get(‘filter’); console.log(filterAction); } },

my component hbs file

\<select name=“newType” onchange={{action “filterStudent” value=“target.value”}} class=“form-control”\>

 Please Select {{#each model.Students as |newStudents|}} {{newStudents.studentName}} {{/each}} 

my Controller

actions: { filterStudentResults(param) { if (param !== ‘’) { return this.get(‘store’).query(‘Students’, { studentName: param }); } else { return this.get(‘store’).findAll(‘Students’); } } } });

Any Help is Appriciated. Thanks 🙂

---

<div class="post-metadata">

### Author: ![matheos](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@matheos](https://discuss.emberjs.com/u/matheos)
#### Post date: [March 14, 2017, 2:16pm UTC](https://discuss.emberjs.com/t/load-results-from-database-in-select-box-onchange-event/12563/2 "2017-03-14T14:16:22Z")

</div>

You can move the logic from your controller to your component. You will also need to add the store to the component as a service.

**my-component.hbs**

```
Please Select
{{#each model.students as |newStudents|}}
  {{newStudents.studentName}}
{{/each}} 

<input type='checkbox' onClick={{action 'checkedAction'}} checked=isChecked /> Change Student Type

```

**my-component.js**

```
import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  isChecked: false,
  actions: {
    checkedAction() {
      if (isChecked) {
        // do something when checked
        // E.g. load all students
        this.set('model', this.get('store').findAll('students'));
      } else {
        // Do something else when NOT checked
        // E.g. only load some students
      	this.set('model', this.get('store').query('students', { type: 1 }));
      }
    }
  }
});

```