I want if a user clicks on “Add More” button the Ingredient Name and Amount input fields keeps adding on page.And when user submit the form after filling all other fields,all input values including Ingredient Name and Amount field get inserted in to Recipes collection. So later i can show complete recipe with its ingredients with amount on show_recipe page.I am not sure if i have to add Ingredient Name and Amount field values into some other collection to show them on show_recipe page.How ever i am not getting how to add all ingredients and their amount and then show them properly on show_recipe page .Can you please guide me how to do it. complete source code is here
add_recipes.html
<template name="add_recipes">
<form class="add_recipe">
<div class="form-group">
<label class="control-label" for="name" >Recipe Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Please Enter the Recipe name">
</div>
<div class="form-inline mb">
<div class="form-group">
<label for="ingredient">Ingredient Name</label>
<input type="text" class="form-control" name="ingredient" id="ingredient" placeholder="Name">
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount ">
</div>
<button class="btn btn-default addMore">Add More</button>
</div>
<div class="form-group">
<label class="control-label" for="des" >How to prepare</label>
<textarea class="form-control" type="text" name="description" rows="3" id="des">
</textarea>
</div>
<div class="form-group">
<label class="control-label" for="time" >Time to prepare</label>
<input class="form-control" type="number" name="time" id="time" placeholder="Time required to make the recipe. (In Minutes)">
</div>
<div class="form-group">
<label for="prodImg">Please Select the Image of your Recipe</label>
<input type="file" id="recipeImage" name="recipeImage">
</div>
<div>
<button type="submit" name="submit" class="btn btn-success "> Add Recipe</button>
<a href="/" class="btn btn-default">Close</a>
</div>
</form>
</template>
add_recipes.js
Template.add_recipes.events({
'submit .add_recipe':function(event){
var name = event.target.name.value ;
var ingredient = event.target.ingredient.value ;
var amount = event.target.amount.value ;
var description = event.target.description.value ;
var time= event.target.time.value ;
var file = $('#recipeImage').get(0).files[0];
if(file){
fsFile = new FS.File(file);
RecipesImages.insert(fsFile,function(err,result){
if(!err){
var recipeImage = '/cfs/files/RecipesImages/'+ result._id;
Recipes.insert({
name:name,
description:description,
image:recipeImage,
time:time,
createdAt: new Date()
})
}
});
} else{
var recipieImage = '/img/noimage.png';
Recipes.insert({
name:name,
description:description,
image:recipesImages,
time:time,
createdAt: new Date()
})
}
// Clear the form
event.target.name.value = "";
event.target.ingredient.value = "";
event.target.amount.value = "";
event.target.description.value = "";
event.target.time.value= "";
FlashMessages.sendSuccess('Recipe Added',{ autoHide: true, hideDelay: 3000 });
Router.go('/');
event.preventDefault();
}
})