Javascript: Auto Calculate dropdown price*quantity input

user_15227869 0
Viewed 178

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>

html javascript
5 Answers

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;
    }
user_10551120

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>

user_141620900

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>

user_118294080 

function calculateAmount() {

  var selFrst = parseInt(document.getElementById("size").value);
  var selScnd = parseInt(document.getElementById("points").value);
  var tot_price;

  if ([120, 80, 64].includes(selFrst)) {
    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">
          <option value="0" disabled selected>--Choose Size--</option>
          <option value="120">4*15</option>
          <option value="80">4*10</option>
          <option value="64">4*8</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>
        <input type="number" id="points" name="points" step="1" min="1" max="499">
      </td>
    </tr>

    <tr>
      <td>Order Total:RM</td>
      <td><input name="tot_amount" id="tot_amount" type="text" readonly onfocus="calculateAmount()"></td>
    </tr>
    <!--end payment-->

  </table>
</form>

Like @swebdev said "Variable selScnd should be selected with its id point because there is no such id as quantity.

You can put the values (120,80,64) in an array so that you can add more values easily without repeating the if-else.

Finally, instead of using onchange="" twice, you may use onfocus="" in that last read-only input box. :)

user_143788550

Still fail 

    <table border="1"width="50%">
        <col style="width:15%">
        <col style="width:35%">
        <!--form title-->  
        <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="quantity" name="quantity" 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>


<script>

    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;
}
    </script> <!--end table-->
user_152278690
Related