Calculate data to an input field from 2 select fields with javascript

Question

I want to calculate 2 options from different selects in HTML and display the result in an input field. The first select will fill from a mysql database, the second select will fill with 1 option that is the pair of the first. I want to multiply them and display the result in the last input field. Here is an example:

The table of the database the field are "id product"-id quantity price type table view

Here is the result that i want: to display

When the user selects the quantity the corresponding value is going to be displayed to the next field.

After that in the last input field i want to calculate the previous selections

• the user can only select the quantity and not the price

I made a select with php and made an array which is converted to javascript array object

<?php
        $sth = $conn->prepare("SELECT quantity,price FROM eb_products_price WHERE product_id = 20");
        $sth->execute();

/* Fetch all of the remaining rows in the result set */
print("Fetch all of the remaining rows in the result set:\n");
$result = $sth->fetchAll(PDO::FETCH_COLUMN|PDO::FETCH_GROUP);
$json_array = json_encode($result);
print_r($result);

With this code the only thing i can do is to display the quantity with a foreach BUT the price will remain the last one and it wont change while i change the quantity.

I found a way to display the correct price but with javascript here is the code

<script>
var arrayObjects = {"400":["0.8"],"300":["0.9"],"200":["0.95"],"100":["1.1"]}


function products() {
    var quantity= document.getElementById("quantity");
    var price= document.getElementById("price");
    var arrprice = quantity.options[quantity.selectedIndex].value;
    while (price.options.length) {
        price.remove(0);
    }
    var prices = arrayObjects[arrprice];
    if (prices) {
        var i;
        for (i = 0; i < prices.length; i++) {
            var price1 = new Option(prices[i], i);
            price.options.add(price1);

        }
    }
}
</script>

Here is the calculate function that work without the last part of code:

calculate = function()
{
    var quantity= document.getElementById('quantity').value;
    var price= document.getElementById('price').value; 
    var number = parseFloat(quantity)*parseFloat(price);
    var n = number.toFixed(2);
    document.getElementById('result').value = n
   }

Answer 1

To change a HTML-Element dynamically you need event Listeners like onChange example below:

 var arrayObjects = {"400":["0.8"],"300":["0.9"],"200":["0.95"],"100":["1.1"]} function products() { var quantity = document.getElementById("quantity"); var factor = document.getElementById("factor"); // added var price= document.getElementById("price"); // Fill dropdown (quantity) while (quantity.options.length) { quantity.remove(0); } // fill by key for( var quantity_key in arrayObjects ) { var quantity_option = new Option( quantity_key, quantity_key ); quantity.options.add(quantity_option); } // onChange-Listener quantity.onchange = () => { factor.value = arrayObjects[quantity.value]; // look for factor by key in arrayObjects price.value = Math.round( quantity.value *arrayObjects[quantity.value] ); }; } products(); 

 <select id='quantity'></select> KG <input type='text' id='factor' readonly="readonly"> <input type='text' id='price' readonly="readonly"> 

Answer 2

in javascript, to get the selected element (value) of a select, use :

var e = document.getElementById("quantity");
var quantity= e.options[e.selectedIndex].text;