autofill an html form input field with a javascript function-CodePudding

I have been browsing through similar questions but have found nothing that would fit the bill. I have three input / select fields and a working JS function to calculate the number. All I need now is to display it automatically upon the selection and number input.

function Calculate() {
  var f1 = document.getElementById("item");
  var field1 = parseInt(f1.options[f1.selectedIndex].value);
  var f2 = document.getElementById("level");
  var field2 = parseInt(f2.options[f2.selectedIndex].value);
  var f3 = document.getElementById("number");
  var field3 = parseInt(f3.value);

  (field1 * field2 * field3) / 100;

}

<label for="item">Choose item:</label>
<select id="item" name="item" form="qForm" required>
  <option value="empty"></option>
  <option value="250">item1</option>
  <option value="250">item2</option>
  <option value="300">item3</option>
</select>
</br>
<label for="level">Choose level:</label>
<select id="level" name="level" form="qForm" required>
  <option value="empty"></option>
  <option value="100">lvl1</option>
  <option value="120">lvl2</option>
  <option value="140">lvl3</option>
</select>
</br>
<label for="number">Duration (hours):</label>
<input id="number" type="number" name="number" min="10" required>
</br>
<label for="price">Preliminary price (EUR):</label>
<input type="number" id="price" name="price" form="qForm" readonly value="Calculate()">

Can you help me, please, to find a way to display the JS function in the "number" input field automatically? Thanks.

I tried the JS function with a button and alert() and it works just fine. However, I cannot make it appear in the input field as I hoped I would by assigning its value to the function.

CodePudding user response：

You need to listen on change event on each of your 3 fields, and recalculate if something changed.

const f1 = document.getElementById("item");
const f2 = document.getElementById("level");
const f3 = document.getElementById("number");

const price = document.getElementById("price");

[f1,f2,f3].forEach(field=> field.addEventListener('change', Calculate));

function Calculate() {
  try{
    var field1 = parseInt(f1.options[f1.selectedIndex].value);
    var field2 = parseInt(f2.options[f2.selectedIndex].value);
    var field3 = parseInt(f3.value);
  
    price.value = (field1 * field2 * field3) / 100;
  }
  catch(e){
    console.log(e.message);
  }
}

    <label for="item">Choose item:</label>
    <select id="item" name="item" form="qForm" required>
      <option value="empty"></option>  
      <option value="250">item1</option>
      <option value="250">item2</option>
      <option value="300">item3</option>
    </select>
    </br>
    <label for="level">Choose level:</label>
    <select id="level" name="level" form="qForm" required>
      <option value="empty"></option>  
      <option value="100">lvl1</option>
      <option value="120">lvl2</option>
      <option value="140">lvl3</option>
      </select>
      </br>
    <label for="number">Duration (hours):</label>
    <input id= "number" type="number" name="number" min="10" required>
    </br>
    <div>
      <label for="price">Preliminary price (EUR):</label>
      <input type="number" id="price" name="price" form="qForm" readonly value="Calculate()">
    </div>

CodePudding user response：

IMHO, I added a event listener "change" on each select input. When the 3 values are different than empty, I write the value :

let foo = document.getElementById("price");
let price = Calculate();
foo.value = price;

Of course, Calculate() will return the computed price.