Calculate and Passing Value from select option to input box

Question

I'm new to HTML and JavaScript. I need to do a website where it requires to sum up the Total value based on the select options. After that, pass the value back to the input in HTML.

HTML code

        <select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
            <option value="None">None</option>
            <option value="G0001">Big Graduation Bear +RM60.00</option>
            <option value="G0002">Small Graduation Bear +RM20.00</option>
            <option value="G0003">Handcraft Gift Card +RM5.00</option>
            <option value="G0004">Valentine Gift Card +RM10.00</option>
            <option value="G0005">Godiva Chocolate Box +RM100.00</option>
            <option value="G0006">Ferrero Rocher Love Box +RM90.00</option>                                                                          
        </select>
            <p class="total"> Total: RM <input type="number" name="total" id="total"></p>

JavaScript Code

<script type="text/javascript">
    function populate(giftname) {
        var giftname = document.getElementById(giftname);
        var gg = giftname.options[giftname.selectedIndex].value;
        var total;
        
    if (gg.value == "G0001") {
        total = 90 + 60;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0002") {
        total = 90 + 20;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0003") {
        total = 90 + 5;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0004") {
        total = 90 + 10;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0005") {
        total = 90 + 100;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0006") {
        total = 90 + 90;
        document.getElementById("total").value = total;
    } 
    else 
    total = 90;
    document.getElementById("total").value = total;
    }
    </script>

A screenshot of result needed

Thank you so much.

David Fontes · Accepted Answer · 2020-09-27T10:12:57.867

You can add a data attribute to your HTML option elements to contain the price and use it to compute your total price.

<select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
  <option data-price="0" value="None">None</option>
  <option data-price="60" value="G0001">Big Graduation Bear +RM60.00</option>
  <option data-price="20" value="G0002">Small Graduation Bear +RM20.00</option>
  <option data-price="5" value="G0003">Handcraft Gift Card +RM5.00</option>
  <option data-price="10" value="G0004">Valentine Gift Card +RM10.00</option>
  <option data-price="100" value="G0005">Godiva Chocolate Box +RM100.00</option>
  <option data-price="90" value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total"></p>

<script type="text/javascript">
  populate('giftname');

  function populate(giftnameId) {
    var giftnameSelect = document.getElementById(giftnameId); // Select dropdown
    let selectedOption = giftnameSelect.options[giftnameSelect.selectedIndex]; // Selected option
    // Get the selected value. We need the plus to parse it to a number, because initially its a string.
    var selectedGiftnameValue = +selectedOption.dataset.price;
    var total = 90 + selectedGiftnameValue;
    document.getElementById("total").value = total;
  }
</script>

I need to insert the gift code into database. Is there any way I could calculate without changing the value? — Veeris, Sep 27 '20 at 09:53

norcal johnny · Answer 2 · 2020-09-27T10:14:39.017

You can try a more simple approach. Assuming you want a dollar value I added

return total.value = Number.parseFloat(price).toFixed(2);

if not replace the above line with

total.value = price;

var price;
var total = document.getElementById('total');
var gg = document.getElementById('giftname');

gg.onchange = function() {
if (gg.value == "G0001") {
        price = 90 + 60;

    } 
    else if (gg.value == "G0002") {
        price = 90 + 20;

    } 
    else if (gg.value == "G0003") {
        price = 90 + 5;
    } 
    else if (gg.value == "G0004") {
        total = 90 + 10;
    } 
    else if (gg.value == "G0005") {
        price = 90 + 100;
    } 
    else if (gg.value == "G0006") {
        price = 90 + 90;
    } 
    else {
    price = 90;
  }  

   return total.value = Number.parseFloat(price).toFixed(2);

}

<select class="normalinput" name="giftname" id="giftname" \>
  <option value="None">None</option>
  <option value="G0001">Big Graduation Bear +RM60.00</option>
  <option value="G0002">Small Graduation Bear +RM20.00</option>
  <option value="G0003">Handcraft Gift Card +RM5.00</option>
  <option value="G0004">Valentine Gift Card +RM10.00</option>
  <option value="G0005">Godiva Chocolate Box +RM100.00</option>
  <option value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total" ></p>

Calculate and Passing Value from select option to input box

2 Answers2