CODEWITHSUNDEEP
javascriptformsvue.jsv-model
Paul Anthony McGowan
Paul Anthony McGowan

Reputation: 307

Assign javascript form value according to input

Hi I have got a little Fish Tank app whereby user can input a Fish type and give it a name.

Also, want to assign a feed weight amount according to the input ie Gold Fish = 0.1, Angel Fish = 0.2 etc so I can collect all and sent in json.

Here is the basic working code Ive got. (except for feed weight/feedMass) but only at moment puts in one value, and have to be able to put more in tank.

new Vue({
  el: '#app',
  props: {
    "Gold Fish": String,
    "Angel Fish": String,
    "Babel Fish": String
  },
  data: {
    fishType: '',
    fishName: '',
    feedMass: ''
  },
  methods: {
    getFormValues() {
      if (this.fishType === "Gold Fish") { // This doesn't work
        this.feedMass = 0.1
      }
      this.fishType = this.$refs.fishType.value // These do.
      this.fishName = this.$refs.fishName.value
      //this.feedMass = this.$refs.feedMass.value
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form>
    <h3>
      Input Gold Fish, Angel Fish or Babel Fish, and give it a name
    </h3>
    <input type="text" ref="fishType">
    <input type="text" ref="fishName">
    <input type="text" ref="feedMass">
    <button @click.prevent="getFormValues()">Get values</button>
  </form>
  <br /> Fish Type {{ fishType }}
  <br /> Fish Name {{ fishName }}
  <br /> Feed Weight {{ feedMass }}
</div>

The feed input is not needed as the weight is to be assigned according to different fish choice,

            • 0.1g for each Gold  fish
            • 0.2g for each Angel fish
            • 0.3g for each Babel fish

They might put in more than one Gold fish for eg so feedMass has to be culmulative, ie add all together.

Have got to collect all choices, 2 by user (type and name of fish), assign the weight and output as json to api.

The actual Jfiddle is at

JFiddle

How to assign the weight according to fishType, perhaps in Tank class?

Tips welcome. Thanks

Upvotes: 0

Views: 64

Answers (1)

Anton Thomas
Anton Thomas

Reputation: 380

I think the best solution here is to define a FishType class as follows:

class FishType {
  name: string;
  feedWeight: number;
}

Then create an array of all the fish types you want:

const fishTypes: FishType[] = [
  {'Gold fish', 0.1},
  {'Angel fish', 0.2}
]

Now, when a user submits a fish type, you can simply fetch the right feed weight by using a filter for example:

const feedWeight = this.fishTypes.filter(t -> t.name.equalsIgnoreCase(this.$refs.fishType.value)).feedWeight;

Note: It might be useful to use the fishtypes in a dropdown, so that users cannot input non-existing fish types.

Upvotes: 2

Related Questions