This code should allow users to choose the size and quantity of banners and the code will automatically calculate the price they have to pay. I tried so many ways but it failed. Below is the code that I had done
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("quantity").value);
var tot_price;
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>You have used id=quantity, but named quantity as point
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
You can see id="points" in the above line, and in the javascript you have used "quantity"
var selScnd = parseInt(document.getElementById("quantity").value);
And cannot guess what the if-else is actually written for, every condition is doing the same work. So remove the if-else. Try the code below.
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price = selFrst * selScnd;
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}
Variable selScnd should be selected with the id point, not width quantity since there is no such id as quantity. In other words there is a typo in your Code.
Your code should be like this:
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
/*display the result*/
document.getElementById("tot_amount").value = tot_price;
}<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>The id of the second div is wrong, also, you should compute the price only when both input are chosen:
function calculateAmount() {
var selFrst = parseInt(document.getElementById("size").value);
var selScnd = parseInt(document.getElementById("points").value);
var tot_price;
if(selScnd && selFrst) {
if (selFrst == 120) {
tot_price = selFrst * selScnd;
} else if (selFrst == 80) {
tot_price = selFrst * selScnd;
} else if (selFrst == 64) {
tot_price = selFrst * selScnd;
}
document.getElementById("tot_amount").value = tot_price;
}
/*display the result*/
}<form id="banner" method="post" action="">
<table border="1" width="50%">
<col style="width:15%">
<col style="width:35%">
<!--form title-->
<tr>
<!--general-->
<th colspan="2">General</th>
</tr>
<tr>
<td>Size</td>
<td>
<select name="size" id="size" onchange="calculateAmount()">
<option value="0" disabled selected>--Choose Size--</option>
<option value="120">4x15</option>
<option value="80">4x10</option>
<option value="64">4x8</option>
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">
</td>
</tr>
<tr>
<td>Order Total:RM</td>
<td><input name="tot_amount" id="tot_amount" type="text" readonly></td>
</tr>
<!--end payment-->
</table>
</form>