recipe-input.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <html>
  2. <head>
  3. <title>Add New Recipe</title>
  4. <link rel="stylesheet" href="styles.css" />
  5. </head>
  6. <body>
  7. <h1>Add new recipe</h1>
  8. <form action="#" method="POST">
  9. <table class="form">
  10. <tr>
  11. <th>Name:</th>
  12. <td colspan="3"><input type="text" name="recipe.name" class="excerpt"/></td>
  13. </tr>
  14. <tr>
  15. <th>Base:</th>
  16. <td>
  17. <select name="recipe.base.baseId">
  18. <option></option>
  19. <option>Chicken</option>
  20. <option>Vegie</option>
  21. </select>
  22. </td>
  23. <th>Prep time:</th>
  24. <td>
  25. <select name="recipe.prepTime.prepTimeId">
  26. <option></option>
  27. <option>&lt; 15 minutes</option>
  28. <option>15 - 30 minutes</option>
  29. <option>30 - 45 minutes</option>
  30. <option>45 - 60 minutes</option>
  31. </select>
  32. </td>
  33. </tr>
  34. <tr>
  35. <th>Ethnicity:</th>
  36. <td>
  37. <select name="recipe.ethnicity.ethnicityId">
  38. <option></option>
  39. <option>American</option>
  40. <option>French</option>
  41. <option>Indian</option>
  42. </select>
  43. </td>
  44. <th>Difficulty:</th>
  45. <td>
  46. <select name="recipe.difficulty.difficultId">
  47. <option></option>
  48. <option>Snap</option>
  49. <option>Easy</option>
  50. <option>Moderate</option>
  51. <option>Difficult</option>
  52. </select>
  53. </td>
  54. </tr>
  55. <tr>
  56. <th>Course:</th>
  57. <td>
  58. <select name="recipe.course.ethnicityId">
  59. <option></option>
  60. <option>Breakfast</option>
  61. <option>Lunch</option>
  62. <option>Dessert</option>
  63. </select>
  64. </td>
  65. <th>Serves:</th>
  66. <td>
  67. <input type="text" name="recipe.servings" class="smallnum"/>
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>Excerpt:</th>
  72. <td colspan="3">
  73. <textarea name="recipe.excerpt" class="excerpt"></textarea>
  74. </td>
  75. </tr>
  76. </table>
  77. <hr class="sep" />
  78. <script type="text/javascript">
  79. var numIngredients = 1;
  80. function addIngredient() {
  81. // get the ingredient table
  82. var row = document.getElementById('ingredient_row');
  83. // get the add row to insert the cloned row into
  84. var addRow = document.getElementById('ingredient_add_row');
  85. // clone the ingredient row
  86. var newRow = row.cloneNode(true);
  87. // find all 'name' attributes, and increment index values
  88. // insert into table
  89. addRow.parentNode.insertBefore(newRow,addRow);
  90. }
  91. function set
  92. </script>
  93. <div class="formLabel">
  94. Ingredients:
  95. </div>
  96. <table class="form" id="ingredient_table">
  97. <tr id="ingredient_row">
  98. <td>
  99. <input type="text" name="recipe.ingredients[0].quantity" class="vsmallnum"/>
  100. <select name="recipe.ingredients[0].unit">
  101. <option></option>
  102. <option>Teaspoon</option>
  103. <option>Tablespoon</option>
  104. </select>
  105. <select name="recipe.ingredients[0].ingredientId">
  106. <option></option>
  107. <option>Flour</option>
  108. <option>Sugar</option>
  109. </select>
  110. <input type="text" name="recipe.ingredients[0].qualifier" />
  111. </td>
  112. <td>
  113. <a href="#" title="Remove Ingredient" class="minus">
  114. <span class="alt">Remove Ingredient</span>
  115. </a>
  116. </td>
  117. </tr>
  118. <tr id="ingredient_add_row">
  119. <td>
  120. <a href="javascript:addIngredient()" title="Add Ingredient" class="plus">
  121. <span class="alt">Add Ingredient</span>
  122. </a>
  123. </td>
  124. <td></td>
  125. </tr>
  126. </table>
  127. </form>
  128. </body>
  129. </html>