calculating form field input value from other values with onfocus

Question

First time caller, long time listener.. I am attempting to have two user filled input fields on a php form be calculated to determine the value of another input field before the form is submitted via a form action button to my database. I prefer to just tab through the fields and have it auto-calculate via onfocus like it did in my msaccess forms.

This is as close as I have been able to get. It requires a button and using a textarea, not an input. I am willing to use ajax, I do not want to link outside for .js files

Here is a Fiddle that does the job but requires click, and is not a form 'input'. If I change the form field from textarea to input, it stops working.

edit - am I wrong for wanting the field type to be 'input' and not 'textarea'?

HTML:

<ul class="form-section">
 <li class="form-line" >
  <label for="WG_Collected">WG Collected</label>
  <div>
  <input type="number" id="WG_Collected" name="WG_Collected" value="15.0" min="0" step="0.1" required>
  </div>
 </li>
 <li class="form-line" >
  <label for="Proof">Proof</label>
   <div>
   <input type="number" id="Proof" name="Proof" Value="79.4" min="0" step="0.1" required>
   </div>
 </li>
 <li class="form-line" >
  <label for="PG_Collected">PG Collected</label>
   <div>
   <textarea type="number" id="PG_Collected" name="PG_Collected"></textarea>
   </div>
  <input type="button" value="Calculate PG" id="submitButton" />
 </li>
</ul>

Script

var button = document.getElementById("submitButton");
button.addEventListener("click", function() {
 var num1 = document.getElementById('WG_Collected').value;
 var num2 = document.getElementById('Proof').value;
 var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
 document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
 }, true);

Have you looked at `change` and `keyup` events on the fields to trigger your function? — Scuzzy, Apr 25 '18 at 22:13
Possible duplicate of [Dynamically changing form value](https://stackoverflow.com/questions/30986981/dynamically-changing-form-value) — , Apr 25 '18 at 22:23
I want the calculation to happen when I tab to the field... having it change when the other fields change is not desirable, but I will explore. Chris G - that filddle is non-operative - correction, it did not work until I typed in the other value fields, it did not work when I tabbed into in the field, I am not sure that is intuitive, but it may be better than what I have, thank you. — clearwaterbrewer, Apr 25 '18 at 23:25

Scuzzy · Answer 1 · 2018-04-25T22:28:14.587

0

The input event will fire value change

https://developer.mozilla.org/en-US/docs/Web/Events/input

function PGCollectedCalc() {
    var num1 = document.getElementById('WG_Collected').value;
    var num2 = document.getElementById('Proof').value;
    var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
    document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
}

document.getElementById("WG_Collected").addEventListener("input", PGCollectedCalc, true);
document.getElementById("Proof").addEventListener("input", PGCollectedCalc, true);

The reason for input is that change will only fire off once you've removed focus from the inputs. http://jsfiddle.net/1wrnL3jp/4/ vs http://jsfiddle.net/1wrnL3jp/5/

edited Apr 25 '18 at 22:28

answered Apr 25 '18 at 22:20

Scuzzy

12,186
1
46
46

Thank you, it seems better than what I had! I would like to have the calculation done on focus, as when tabbing through... and also, I would like the field to be 'input', not 'textarea'. When I change that in either fiddle, it stops working. – clearwaterbrewer Apr 25 '18 at 23:36
I put your fiddle on my system, even stripped to bare bones, and I cannot get it to work like it does on jsfiddle, any clues? [Here is a jsfiddle](http://jsfiddle.net/L69yaj30/) of what my page looks like, not sure if fiddle allows script in the html section, but it does not work. – clearwaterbrewer Apr 26 '18 at 01:11
The problem is the javascript executes before the inputs are on the page. You need to [delay your javascript execution](https://stackoverflow.com/a/7371558/61795), or move your script to after teh form. eg http://jsfiddle.net/L69yaj30/2/ or http://jsfiddle.net/L69yaj30/1/ – Scuzzy Apr 26 '18 at 04:39

soDub · Answer 2 · 2018-04-25T22:34:42.953

http://jsfiddle.net/7mwge85c/

HTML

<ul class="form-section">
 <li class="form-line" >
  <label for="WG_Collected">WG Collected</label>
  <div>
  <input type="number" id="WG_Collected" name="WG_Collected" value="15.0" min="0" step="0.1" required>
  </div>
 </li>
 <li class="form-line" >
  <label for="Proof">Proof</label>
   <div>
   <input type="number" id="Proof" name="Proof" Value="79.4" min="0" step="0.1" required>
   </div>
 </li>
 <li class="form-line" >
  <label for="PG_Collected">PG Collected</label>
   <div>
   <textarea type="number" id="PG_Collected" name="PG_Collected"></textarea>
   </div>
  <input type="button" value="Calculate PG" id="submitButton" />
 </li>
</ul>

Script working with keyup or onfocus(focus)

var button = document.getElementById("submitButton");
var inputOne = document.getElementById("WG_Collected");
var inputTwo = document.getElementById("Proof");

//keyup if you press any key
inputOne.addEventListener("keyup", function() {
    calcPG();
}, true);
inputTwo.addEventListener("keyup", function() {
    calcPG();
}, true);

//if some of the inputs get focus
inputOne.addEventListener("focus", function() {
    calcPG();
}, true);
inputTwo.addEventListener("focus", function() {
    calcPG();
}, true);

//your button click
button.addEventListener("click", function() {
    calcPG();
 }, true);

function calcPG (){
    var num1 = document.getElementById('WG_Collected').value;
    var num2 = document.getElementById('Proof').value;
    var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
    document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
}

am I incorrect to want it to work with the field type to be input? — clearwaterbrewer, Apr 25 '18 at 23:39
I tried using this in my environment, I even took it to bare minimum and it would not work, what I have is basically like [this fork of your fiddle](http://jsfiddle.net/ztLddcqf/). Any clues whey it is not working? — clearwaterbrewer, Apr 26 '18 at 00:56
no, both versions should work...but if you use an input field, you need to set value, not innerHTML(and an input field is much more customizable, like a readonly option which you can use for your PG_Collected). The code does not work because you didn't not load the code, so no listener would be set. I added an simple window.onload = function(){}. Here the working fiddle: http://jsfiddle.net/ztLddcqf/4/ — soDub, Apr 26 '18 at 09:02

calculating form field input value from other values with onfocus

2 Answers2

Linked