Question

0

158

Vistas

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>

about 4 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-08-31T05:40:40.491Z

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

Answer 2 · 2022-08-31T05:40:40.496Z

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>

Answer 3 · 2022-08-31T05:40:40.502Z

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>

0

158

Javascript: Auto Calculate dropdown price*quantity input

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT