javascript update form field by multiple option values

user_16425137 0
Viewed 34

First of all, im new at this. I want to make a simple form to calculate a volume of right rectangular prism. If the user select option custom, then user can customize the length(custom_panjang), width (custom_lebar) and height(custom_tinggi). But there is other option without customize (10x10x5),etc.

I've found the solution to calculate the result from the customize option. But how can i calculate the other option (without calculate).

function pilihUkuran() {
  var custom = document.getElementById("ukuran");
  if (custom.value == "30x30x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else if (custom.value == "10x10x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else if (custom.value == "20x20x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
  } else
    document.getElementById("customukuran1").style.visibility = "visible";
}

function mult(pj, lb, tg) {
  var isipj = pj;
  var isilb = lb;
  var isitg = tg;
  var hasil = isipj * isilb * isitg;
  document.getElementById('rupiah').value = hasil;
}
<div>
  <label class="col-sm-2 mb-3">&nbsp;&nbsp;Ukuran</label>
  <select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
    <option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
    <option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
    <option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
    <option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
  </select>
</div>

<div id="customukuran1" style="visibility: hidden;">
  <select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
    <!-- MENDAPATKAN VARIABEL P x L x T -->
    <input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">

    <input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">

    <input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">

  </select><br>
</div>

<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

Or you can see the demo right here https://jsfiddle.net/aurj74nq/

Please help me, thank you.

javascript
1 Answers

Call the mult when the value changes in the select. Also, call pilihUkuran once at the end so that the function will be called for the initial value of the select. If you don't want this, then you can omit it.

function pilihUkuran() {
  var custom = document.getElementById("ukuran");
  if (custom.value == "30x30x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(30, 30, 5)
  } else if (custom.value == "10x10x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(10, 10, 5)
  } else if (custom.value == "20x20x5") {
    document.getElementById("customukuran1").style.visibility = "hidden";
    mult(20, 20, 5)
  } else
    document.getElementById("customukuran1").style.visibility = "visible";
}

function mult(pj, lb, tg) {
  var isipj = pj;
  var isilb = lb;
  var isitg = tg;
  var hasil = isipj * isilb * isitg;
  document.getElementById('rupiah').value = hasil;
}

pilihUkuran(); // Optional
<div>
  <label class="col-sm-2 mb-3">&nbsp;&nbsp;Ukuran</label>
  <select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
    <option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
    <option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
    <option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
    <option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
  </select>
</div>

<div id="customukuran1" style="visibility: hidden;">
  <select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
    <!-- MENDAPATKAN VARIABEL P x L x T -->
    <input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">

    <input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">

    <input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">

  </select><br>
</div>

<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

user_111712860
Related