Javascript onclick populate form field

Question

I have 3 form fields

div {
  padding: 5px;
  margin: 10px auto;
}

input {
  padding: 3px 5px;
}

<div>Ingredient Unit Price:<input class="form-control" type="text" name="flt_IngredientUnitPrice" id="flt_IngredientUnitPrice"></div>
<div>Portions in Item:<input class="form-control" type="text" name="num_IngredientPortion" id="num_IngredientPortion"></div>
<div>Ingredient Portion Price:<input class="form-control" type="text" name="flt_IngredientPortionPrice" id="flt_IngredientPortionPrice"></div>

Once there is data in flt_IngredientUnitPrice & num_IngredientPortion I need the value of flt_IngredientPortionPrice to automatically get filled with the value of flt_IngredientUnitPrice/num_IngredientPortion.

Presumably I can do this with an onclick event but not sure how

There are so many answers here about this already - here's a random example - you must have seen those in your searches. So what specifically are you having trouble with? — Don't Panic
– Don't Panic, Commented 6 hours ago
I cant find an example that does it - that example for instance puts the same text into box 2 when you are typing it into box 1 Box 1 and 2 need to be populated and then the use can click into box 3 ( or a button) and box 3 gets populated with the equation box1/box2 — Paul Hopkinson
– Paul Hopkinson, Commented 6 hours ago

Ashim Debnath · Accepted Answer · 2025-11-30 21:10:46Z

div {
  padding: 5px;
  margin: 10px auto;
}

input {
  padding: 3px 5px;
}

<div>
  Ingredient Unit Price:
  <input class="form-control" type="text" id="flt_IngredientUnitPrice">
</div>
<div>
  Portions in Item:
  <input class="form-control" type="text" id="num_IngredientPortion">
</div>
<div>
  Ingredient Portion Price:
  <input class="form-control" type="text" id="flt_IngredientPortionPrice" readonly>
</div>

<script>
//these three lines are used to take get access of the tags

const pricePerUnit = document.getElementById("flt_IngredientUnitPrice");
const totalItems = document.getElementById("num_IngredientPortion");
const portionPrice = document.getElementById("flt_IngredientPortionPrice");

//these two lines of code add eventlisteners to the tags, a function called //calculatePrice() will run of each input to the first two input tags

pricePerUnit.addEventListener("input", calculatePrice);
totalItems.addEventListener("input", calculatePrice);

//this is the function definiton
function calculatePrice() {
    const price = parseFloat(pricePerUnit.value);
    const items = parseFloat(totalItems.value);

        portionPrice.value = (price / items);    
}
</script>

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Javascript onclick populate form field

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related