CODEWITHSUNDEEP
meteormeteor-autoform
WalterB
WalterB

Reputation: 110

Meteor change collection on user dropdown selection

I'm using Meteor in combination with autoForm / quickForm. I have on collection, lets call it "Sports" for this example. The collection asks the question which sports the user has done this week using a dropdown (allowedValues in autoForm). Now if the user selects running, I want to show 'distance', 'area', etc. If the user selects basketball, I might want to show 'shots taken', etc.

How should I go about this? Create multiple Collections or SimpleSchema's, or is there a different preferred approach? Could not find anything on Google, though I am sure this is not an uncommon question. If anyone has a link with more info that is already very much appreciated.

Update:

I am using an 'each' loop to loop through all possible sports I have defined earlier. Do you think it would make more sense to create a form item for each different sport? If so, how can I make sure this is correctly configured in the schema? Thank you in advance!

{{#autoForm collection="Sports" type="update" doc=this id="FieldValueIsForm"}}
  {{#each sports}}
    <h3>{{this.name}}</h3>
    {{> afQuickField name="sports.$.sportTrue" noselect=true }}

    {{#if afFieldValueIs name="sports.$.sportTrue" value=true}}
      {{> afQuickField name="sports.$.sportDistance" value=this.frequency}}
    {{/if}}
  {{/each}}

  <div>
    <button type="submit">Submit</button>
  </div>
{{/autoForm}}

Update 2:

My schema can be found here: http://pastebin.com/SbBSbqW2 I simplified it a bit, but this is the main content. For different sports I would need different input fields.

Upvotes: 0

Views: 91

Answers (1)

NFab
NFab

Reputation: 416

Sounds like you want to use the afQuickField option with a conditional. The documentation talks about it here. There is also a demo of what the code should look like here; however, it looks like this:

{{#autoForm collection="FieldValueIs" type="insert" id="FieldValueIsForm"}}
  {{> afQuickField name="a" options="allowed" noselect=true}}
  {{#if afFieldValueIs name="a" value="foo"}}
    {{> afQuickField name="b"}}
  {{/if}}
{{/autoForm}}

You would just need to make sure you set up "a" and "b" to be the select fields you want by setting them up properly in your schema.

UPDATE:

I assume you want to store the distance, shots taken, etc. in the SingleSport collection. Exactly how you store it is up to you, but it could look something like the following:

SingleSport = new SimpleSchema({
  sportType: {
    type: String
  },
  distanceRun: {
    type: Number,
    decimal: true,
    optional: true
  },
  shotsTaken: {
    type: Number,
    optional: true
  },
  sportTrue: {
    type: Boolean,
    label: "Sport completed",
    autoform:{
        type: "boolean-radios",
        trueLabel: "Enabled",
        falseLabel: "Disabled",
        value: false
    }
  }
});

Then, you could change the conditional section of your form like so:

{{#if afFieldValueIs name="sportType" value="running"}}
  {{> afQuickField name="distanceRun"}}
{{/if}}
{{#if afFieldValueIs name="sportType" value="basketball"}}
  {{> afQuickField name="shotsTaken"}}
{{/if}}

Upvotes: 1

Related Questions