Event, Api: correct usage for a simple use case. Feeback needed.
Goal: I try to do learn JQUERY and apply the correct api for a use case.
1. I did according my little understanding
See html/javascript code. See below attached picture
// dynamically create a list of select/options (Quantity) , textbox (Price of an item), label (Total)
// when a select/option is selected, calculate Total = Quantity * Price for each Item and Grand total.
2. How would you code and which aspect of my html/javascript code
should be changed to reflect the correct usage of Jquery api and/or way of simplify things.
3. or just throw any comment (kindly please, not too hash :-D)
=====================
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Jquery Concepts</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="selectoption.js"></script>
</head>
<body>
<header>
</header>
<div id="formcontainer" ></div>
<div id="sumcontainer" ></div>
</body>
</html>
==========================================
// dynamically create a list of select/options (Quantity) , textbox (Price of an item), label (Total)
// when a select/option is selected, calculate Total = Quantity * Price for each Item and Grand total.
$(document).ready(function() {
$("#formcontainer").append("<p>").append("Quantity")
.append("Price").append("Total")
.append("</p>");
for (var i = 1; i <= 3; i++) { // begin loop
// create select option for Quantity
var selectedAttr=" selected='selected'";
var qtySelect = "<select id='qty" + i + "' name='qty" + i + "'>";
for (var j = 0; j < 4; j++) {
if (j>0)
selectedAttr="";
var option = "<option value='" + j + "'" + selectedAttr + ">" + j + "</option>";
qtySelect += option;
}
qtySelect += "</select>";
console.log(qtySelect);
// create textbox for Price
var priceInputBox = "<input type='text' id='price" + i + "' name='price" + i + "' value=" + (i * 5)
+ "></input>";
console.log(priceInputBox);
// create label for Total
var totalLabel = "<label id='total" + i + "'>" + "0" + "</label>";
console.log(totalLabel);
$("#formcontainer").append("<p>").append(qtySelect)
.append(priceInputBox).append(totalLabel)
.append("</p>");
}
; // end loop
//create handler
$("select").change(function() {
var curDomElement = $(this);
var qty = $(curDomElement).val();
var nameAttr = curDomElement.attr("name");
var rowIndex = nameAttr.charAt(nameAttr.length-1);
console.log("select row#=" + rowIndex + " qty=" + qty);
var price = $("input#price"+ rowIndex).val();
console.log($("label#total"+rowIndex).length);
// Item total
$("label#total"+rowIndex).html(qty*price);
// Grand total
var sum=0;
$("label").each(function (index, curDomElement) {
sum+=Number($(curDomElement).html());
});
$("#sumcontainer").html(sum);
});
});
========================