Inserting form field values into HTML
I have a form which is used to write recipes. I have a part of the form to list ingredients which uses 3 for fields, one for quantity one for measurement and one for the ingredient.
Quantity is a text field and the other two are selects. The measurement select options are hard coded and the ingredients available are retrieved from a db and added with PHP. Under this I have a button that I would like to use to get the values of these form fields when clicked and apend to the value of a hidden form field which will be a multi dimensional array of those three values for each ingredient used. I would also like it to get the text values and print them to an empty element so the user can see what they are adding.
I am a total newb with javascript and jQuery but I had a go at it and it doesn't work. I can't get it to do anything. I scrapped together what I have from the documentation and examples from other tutorials around the web. Any help to get it working properly would be greatly appreciated!
Form Code :
-
<li>Ingredients
<ul>
<li>
<label for="quantity">Quantity</label>
<input type="text" name="quantity" />
</li>
<li>
<label for="measurement">Measurement</label>
<select name="measurement">
<option>Select</option>
<option value="1">kilograms</option>
<option value="2">grams</option>
<option value="3">litres</option>
<option value="4">millilitres</option>
<option value="5">cups</option>
<option value="6">tablespoons</option>
<option value="7">teaspoons</option>
</select>
</li>
<li>
<label for="ingredient">Ingredient</label>
<select name="ingredient">
<?php
foreach($page['archive'] as $item) {
?>
<option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
<?php
}
?>
</select>
</li>
<li class="addingredient">
<input type="button" name="addingredient" value="Add Ingredient" id="addingredienttolist" />
<input type="hidden" name="ingredientarray" value="" />
</li>
</ul>
</li>
<li class="visible_list">
</li>
jQuery Code :
-
$(document).ready(function() {
$("#addingredienttolist").click(function() {
var newq = $("input[name*='quantity']").val();
var newm = $("select[name*='measurement'] option:selected").text();
var newmid = $("select[name*='measurement'] option:selected").val();
var newi = $("select[name*='ingredient'] option:selected").text();
var newiid = $("select[name*='ingredient'] option:selected").val();
$("input[name*='ingredientarray']").val().append(newq + "," + newmid + "," + newiid + "-");
$(".visible_list").append(newq + " " + newm + " " + newi);
});
});