Auto fill total price use javascript dom

user_12274169 0
Viewed 162

Hay, i want make some calculator that can make total price with auto fill. First i select option to choose the plan, than after choose the plan the basic price will generated automatically, after that i input the discount value, than the total price will auto generated (basic price-discount). How to implement that to my code:

Here my HTML:

<form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="" id="paket" onchange="myFunction(event)">
          <option selected disabled>...</option>
          <option value="Bali">Paket Tour Bali</option>
          <option value="Korea">Paket Tour Korea</option>
          <option value="Eropa">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text" value=""></td>
    </tr>

  </table>
</form>

My JS:

function myFunction(event) {
  console.log(event.target.value)

  if (event.target.value === "Bali") {
    document.getElementById("harga").value = 700000;
  } else if (event.target.value === "Korea") {
    document.getElementById("harga").value = 1500000;
  } else if (event.target.value === "Eropa") {
    document.getElementById("harga").value = 4000000;
  }

};
dom html javascript
1 Answers

You could add event listeners to the paket and diskon fields. Make sure the fields have those names.

const form = document.forms['cal'];

const hargaMap = {
  Bali: 700000,
  Korea: 1500000,
  Eropa: 4000000
};

const main = () => {
  form.elements.paket.addEventListener('change', onPaketChange);
  form.elements.diskon.addEventListener('change', onDiskonChange);
  form.elements.diskon.addEventListener('input', onDiskonChange);
};

const applyDiscount = (amount, discount) => amount - (amount * discount);

const onPaketChange = e => {
  form.elements.harga.value = hargaMap[e.target.value] || 0;
};

const onDiskonChange = e => {
  const harga = parseInt(form.elements.harga.value || '0', 10);
  const diskon = parseInt(form.elements.diskon.value || '0', 10) / 100;
  form.elements.tot.value = applyDiscount(harga, diskon).toFixed(2);
};

main();
<form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="paket" id="paket">
          <option selected disabled>...</option>
          <option value="Bali">Paket Tour Bali</option>
          <option value="Korea">Paket Tour Korea</option>
          <option value="Eropa">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number" min="0" value="0">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text" value="0.00"></td>
    </tr>
  </table>
</form>

user_17622240
Related