1
如果用戶點擊「添加更多」按鈕成分名稱和金額輸入字段保持上添加page.And當用戶填寫所有其他字段後提交表單我想，所有的輸入值包括組分名稱和金額字段被插入到Recipes集合中。所以後來我可以用show_recipe page.I不知道是否需要添加成分名稱和金額字段值轉換爲show_recipe頁面上顯示它們的某些其他集合。我沒有得到如何添加所有成分和數量，然後在show_recipe頁面上正確顯示它們。請給我指導如何去做。 完整的源代碼是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();
}
})