autofill an html form input field with a javascript function

Question

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.

Javascript does not execute in the value attribute: <input ... value="Calculate()">; — bloodyKnuckles
– bloodyKnuckles, Commented Nov 3, 2022 at 20:41
This question was asked and answered, and the answer was accepted. I rolled back your edit. Please don't add new questions to the content of existing questions. — Robby Cornelissen
– Robby Cornelissen, Commented Mar 3, 2023 at 8:46
Get it! thanks for letting me know. I already asked about the new one separately. — Tomas
– Tomas, Commented Mar 3, 2023 at 8:50

Evgeni Dikerman · Accepted Answer · 2022-11-03 21:03:55Z

2

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>

edited Nov 3, 2022 at 21:03

answered Nov 3, 2022 at 20:43

Evgeni Dikerman

5263 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bloodyKnuckles Over a year ago

Much more convenient for us is to add a working snippet in your answer.

Evgeni Dikerman Over a year ago

@bloodyKnuckles here you go

bloodyKnuckles Over a year ago

I see your "Working example" link, but I don't see the stackoverflow snippet you can create in your answer. ...just like I added to the question. See the blue button "Run code snippet"?

Yannick Durden · Accepted Answer · 2022-11-03 20:37:42Z

0

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.

answered Nov 3, 2022 at 20:37

Yannick Durden

258 bronze badges

3 Comments

bloodyKnuckles Over a year ago

That sounds reasonable. Can you provide a short working example?

Yannick Durden Over a year ago

The mate below has added a snippet. We have the same idea. Sweet!

Tomas Over a year ago

Thanks @YannickDurden for your answer. I have tagged the other answer as correct since it has a snippet provided already.. still very much appreciated.

Collectives™ on Stack Overflow

autofill an html form input field with a javascript function

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related