I am trying to grab the subtotal value of the deleted row, by doing the alert. However, nothing is showing up. I am using Jquery.
I researched the answer on a previous stackoverflow question, but I still cannot get it to work.
I would appreciate any suggestions.
https://jsfiddle.net/LL7myety/
HTML:
<form>
<fieldset>
<legend>
Customer's Information
</legend>
<!--asks for name-->
<label for="nameInput">Name</label>
<input type="text" id="nameInput" name="name" placeholder="John Doe" />
<br><br>
Drink Order:
<!--asks for coffee type-->
<select name="drinkType" id="drinkType">
<option value="#">Select Drink</option>
<option value="0">Tea $2.25</option>
<option value="1">Coke $2.50</option>
<option value="2">Coffee $2.25</option>
</select>
<br><br>
<label for="subtotal">Subtotal :</label>
<input type="text" id="subtotal" disabled>
<br>
<label> </label>
<input type="button" id="placeOrderBtn" value="Place Order">
<br><br>
</fieldset>
</form>
<br>
<br>
<div id = "receiptO">
<table id = "receiptOrders">
<thead>
<tr>
<th>Item Number</th>
<th>Name</th>
<th>Type of Coffee</th>
<th>Subtotal</th>
<th>Edit/Save</th>
<th><input type="button" id="deleteRowBtn" value="Delete Row"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JS:
// if errors JavaScript will stop running
"use strict";
// Global Variables
var amt = 0;
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes
// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder =[]; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal
var result = []; // holds subtotal in delete function
// ready event: short way
$(function() {
// change
$("select").change(processOrder); // select tags
// calculates total cost
$("#placeOrderBtn").click(function() {
var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
var totalList = 0;
var subtotal = parseFloat($("#subtotal").val());
subtotal = subtotal.toFixed(2); // converts to string, 2 numbers after decimal
// adds new item to the end of the array using push method
namesInputsHolder.push(nameInput); // adds name
drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type
subtotalHolder.push(subtotal); // adds subtotal cost
// i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) {
totalList = "<tr><td></td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='checkbox'></td></tr>";
}
$("#receiptOrders > tbody").append(totalList); // table: tbody: children
}
// deletes row
$("#deleteRowBtn").click(function() {
$("#receiptOrders input:checkbox:checked").closest('tr').remove(); // deletes row
$("#receiptO").click(function() {
// get value of subtotal of deleted row
$("input:checkbox:checked", "#receiptOrders").each(function() {
result.push($(this).children().next().text());
});
alert(result);
});
}); // end delete click
}); // end places order click
}); // end of ready event handler
var processOrder = function() {
// declaring local variables
var amt = 0;
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
// shows output
//calls the function
var subtotal = drinkType(drink);
subtotal = parseFloat(subtotal);
// val() returns string, need to parse it into number first
$("#subtotal").val(subtotal.toFixed(2));
};
// matches each drink type to each price
// gets amount
var drinkType = function(inDrink) {
var amt = 0;
switch(inDrink) {
case 0:
amt = drinkCosts[0]; // Tea
break;
case 1:
amt = drinkCosts[1]; // Coke
break;
case 2:
amt = drinkCosts[2]; // Coffee
break;
}
return amt;
};
// matches each drink type to each price
// gets name for receipt purposes
var drinkTypeName = function(inDrink) {
switch(inDrink) {
case 0:
return "Tea";
break;
case 1:
return "Coke";
break;
case 2:
return "Coffee";
break;
}
};
