CODEWITHSUNDEEP
javascripthtml
SABRINA
SABRINA

Reputation: 39

Javascript: Auto Calculate dropdown price*quantity input

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>

Upvotes: 2

Views: 662

Answers (5)

Random Kindle
Random Kindle

Reputation: 520

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. :)

Upvotes: 1

swebdev
swebdev

Reputation: 58

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>

Upvotes: 1

Greedo
Greedo

Reputation: 3559

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>

Upvotes: 1

SABRINA
SABRINA

Reputation: 39

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-->

Upvotes: 0

Subhashis Pandey
Subhashis Pandey

Reputation: 1538

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

Upvotes: 2

Related Questions