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);