how do I insert a collection into a form in meteor

Question

I am trying to make a basic recipe form that has another form inside it. The inner form uses a collection. I am trying to input that collection into the larger form. I am not sure how to write the code on that particular part.

Ingredients = new Mongo.Collection('ingredients');
Recipe = new Mongo.Collection('recipe');

    'submit .recipe_submit': function(event){

        Recipe.insert({
            recipeServing:event.target.mealserving.value,
            recipeIngredients:event.target.,
            recipeDirection:event.target.recipedirections.value

        })
    }


 <template name="addingredients">
         <h2>Enter Ingredients</h2>
                 <form class="form-group">
                     Food Item</span><input name="ingredientType" type="text">
                     Quantity</span><input name="ingredientQuantity" type="text">
                     Amount</span><input name="ingredientAmount" type="text" >
                    <button type="submit">Add</button>
                 </form>
                 <div class="col-md-12">
                     <ul>
                         {{#each ingredients}}
                             <li >
                                 <div>
                                     <div>{{this.foodItem}}</div>
                                     <div>{{this.foodQuantity}}</div>
                                     <div>{{this.foodAmount}}</div>
                                     <div class="delete"></div>
                                </div>
                             </li>
                         {{/each}}
                     </ul>
                 </div>

 </template>

Normally I would use he name="" from the input, but I don't see how this works in this case. I also don't need it to import the delete button either. Any help would be awesome.

Answer 1

Your event needs to extract each value out properly. Here is an example of how you could do it:

Template.addingingredients.events({
    'submit .recipe_submit': function(event, template){

        Recipe.insert({
            recipeType: template.$("input[name=ingredientType]").val(),
            recipeQuantity: template.$("input[name=ingredientQuantity]").val(),
            recipeAmount: template.$("input[name=ingredientAmount]").val()
        })
    }
});

I had to rename the keys in your recipe to match the field names, you don't have a 'serving', 'ingredients' or 'direction' elements on your form. I don't think this is what you're looking for in your question, though.

The key point is ff you want to extract a value from an element you can use something like $("input[name=ingredientQuantity]").val() to get the value for an element like <input name="ingredientQuantity" type="text"/>

Answer 2

You can either reference or embed Ingredients inside Recipes. Since the ingredient information is frequently used with the recipe information, I would recommend embedding the Ingredients, but you will first need to grab the ingredients from the inner form with JQuery, which requires distinguishable selectors:

{{#each ingredients}}
    <li class="ingredient">
        <div class="item">{{this.foodItem}}</div>
        <div class="quantity">{{this.foodQuantity}}</div>
        <div class="amount">{{this.foodAmount}}</div>
        <div class="delete"></div>
    </li>
{{/each}}

When the form is submitted, we create an array of Ingredient objects and then embed them as a property of Recipe:

Template.addingingredients.events({
    'submit .recipe_submit': function(event, template){

         var ingredients = [];

         $("li.ingredient").each(function() {
             var selector = this;
             ingredients.push({
                 foodItem: $(selector).find(".item").text(),
                 foodQuantity: $(selector).find(".quantity").text(),
                 foodAmount: $(selector).find(".amount").text()
             });
         });

         Recipe.insert({
             recipeServing: event.target.mealserving.value,
             recipeIngredients: ingredients,
             recipeDirection: event.target.recipedirections.value
         });
     }
});