When I entered the unit price* quantity, it works and the values for total price changes on the 1st row only. However, it could not be done on the rest of the rows. So, do u mind helping me to figure out and help me solve my problem. Below are the codes I’m working on right now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
.top-bottom{
background-color: skyblue;
}
.total_column{
background-color: silver;
}
.all:hover{
background-color: yellow;
}
td .align-right input {
text-align: right;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<table border="2" onchange="calculateTotal()">
<form method="post">
<tr style="font-weight:bold" ; class="top-bottom all" >
<td>No.</td>
<td>Book Title</td>
<td>Author</td>
<td>Category</td>
<td style="text-align: right;">Unit Price</td>
<td style="text-align: right;">Quantity</td>
<td style="text-align: right;">Total</td>
</tr>
<tr class="all">
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value=""/>
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value=""/>
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<div class="align-right">
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</div>
</td>
<td>
<div class="align-right">
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</div>
</td>
<td>
<div class="align-right">
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" class="total_column" />
</div>
</td>
</tr>
<tr class="all">
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value=""/>
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value=""/>
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<div class="align-right">
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" class="total_column " />
</div>
</td>
</tr>
<tr class="all">
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value=""/>
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value=""/>
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<div class="align-right">
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" class="total_column" />
</div>
</td>
</tr>
<tr class="all">
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value=""/>
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value=""/>
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<div class="align-right">
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" class="total_column" />
</div>
</td>
</tr>
<tr class="all">
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value=""/>
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value=""/>
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<div class="align-right">
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0"/>
</div>
</td>
<td>
<div class="align-right">
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" class="total_column"/>
</div>
</td>
</tr>
<tr class="top-bottom all">
<td colspan="5" align="right">
<div class="align-right" >
<input type="button" onclick="calculateTotal()" value="Calculate Grand Total Price">
</div>
</td>
<td colspan="2" align="right">
<div class="align-right">
<input type="text" name="sec6" id="sec6" value="0.00" readonly="readonly" style="background-color: silver; font-size: 18pt;"/>
</div>
</td>
</tr>
</form>
</table>
</body>
<script>
function calculateTotal(){
// Get the input values //
a = Number(document.getElementById("sec3").value);
b = Number(document.getElementById("sec4").value);
// Do the multiplication
c = a*b;
// Set the value of the total
document.getElementById("sec5").value = c;
}
</script>
</html>