Member Avatar for derekcpt

Guess this is javascript.

Similar as in excel, (I have seen this before), lets say I have 3 fields in a form.

Now when entering a numeric value in field 1, and lets say field 2 has the value of 5, then the value of field 1 times field 2 has to display in filed 3.

Please if anyone could assist me with this.

Also, similar to a popup calendar where one can select a date and once selected, the date automatically displays in the text field, how is it possible to have a custom popup page with pre-defined values, and ince a value in the popup are selected, its displayed in the field of the parent page.

  • 4 Contributors
  • 3 Replies
  • 203 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by jubbar003

Dani AI

Generated

A short, practical answer that ties the thread together: ’s quick onfocus trick shows why multiplication “worked” for the original poster, but it forces the user to click the result field. correctly noticed addition producing "34" — that’s string concatenation in JavaScript. ’s percent example needs the correct formula plus numeric conversion. Below are concise, robust patterns that handle live updates, percent math, and popup pickers.

Keep numeric values numeric: coerce input.value (always a string) to a number with Number(), parseFloat(), or the unary +. Use the input event for live recalculation and a small helper to tolerate empty fields and comma decimals:

<input id="a" type="number" step="any">
<input id="b" type="number" step="any">
<input id="result" readonly>

<script>
const a = document.getElementById('a');
const b = document.getElementById('b');
const result = document.getElementById('result');

function toNum(v){
  const n = parseFloat(String(v).trim().replace(',', '.'));
  return Number.isFinite(n) ? n : 0;
}

function update(){
  const x = toNum(a.value);
  const y = toNum(b.value);
  result.value = (x + y).toString(); // use x * y for multiplication
}

a.addEventListener('input', update);
b.addEventListener('input', update);
update();
</script>

Percent example (what wanted): result = field1 (1 + field2/100) or result = field1 + field1 field2 / 100. Format for display with .toFixed(2) if needed, remembering .toFixed() returns a string.

Popup picker patterns:

  • Same-origin simple approach: the popup calls window.opener.document.getElementById('target').value = chosenValue; window.close();.
  • Cross-origin (secure) approach: use window.postMessage from the popup and a message event listener in the opener, validating event.origin before using event.data.

Quick troubleshooting notes: prefer type="number" with step="any" for numeric keyboards, guard against NaN, strip thousands separators before parsing, and avoid relying on string concatenation — always coerce inputs to numbers before arithmetic.

Member Avatar for anuj_sharma 
<html>

<body>

<form>
<input type="text" id="field1">
<input type="text" id="field2" ><br>
Answer 
<input type="text" id="ans" onfocus="document.getElementById('ans').value=document.getElementById('field1').value*document.getElementById('field2').value" >
</form>

</body>
</html>

When you Click on the 3rd field, it will display the answer i.e. the product of the first field and second field.
I hope this is what you wanted.
Have a nice day!! :)

Member Avatar for fnabulsi

this is very nice but the problem is that if you need to add up fields, let's say field1 + field2
when field1=3 and field2=4 the total is 34 instead of 3+4="7"

it works on multiplication, but not addition. such a simple script i wished it worked better

Member Avatar for jubbar003

i need (field1field2/100)+field1
(1005/100)+100
result= 105
but it is giving
5100

Edited by jubbar003 because: please provide me solution
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.