使用 onfocus 从其他值计算表单字段输入值

Question

第一次来电，长期听话.. 我试图在通过表单操作按钮将表单提交到我的数据库之前计算 php 表单上的两个用户填写的输入字段以确定另一个输入字段的值。我更喜欢在字段中使用标签，并通过 onfocus 自动计算，就像在我的 msaccess 表单中所做的那样。

这是我所能得到的最接近的。它需要一个按钮并使用文本区域，而不是输入。我愿意使用 ajax，我不想在外部链接 .js 文件

这是一个Fiddle，它可以完成这项工作，但需要点击，而不是表单“输入”。如果我将表单字段从 textarea 更改为 input，它将停止工作。

edit - 我希望字段类型为“输入”而不是“文本区域”是不是错了？

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>

脚本

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

Answer 1

input 事件将触发值更改

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

input 的原因是 change 只有在您从输入中移除焦点后才会触发。 http://jsfiddle.net/1wrnL3jp/4/ 与 http://jsfiddle.net/1wrnL3jp/5/

Answer 2

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>

使用 keyup 或 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);
}