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

时间:2018-04-25 22:07:28

标签: javascript php ajax forms

第一次来电,长时间听众.. 我试图在php表单上设置两个用户填充的输入字段,以便在通过表单操作按钮将表单提交到我的数据库之前确定另一个输入字段的值。我更喜欢只选择字段并通过onfocus自动计算,就像在我的msaccess表单中一样。

这与我能够得到的一样接近。它需要一个按钮并使用textarea而不是输入。我愿意使用ajax,我不想在外面链接.js文件

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

修改 - 我希望字段类型为'输入'而不是' 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>

脚本

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

2 个答案:

答案 0 :(得分:0)

publishing { publications { mavenJava(MavenPublication) { version 'your_time_stamp' from components.java } } } 事件将触发值更改

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

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只有在您从输入中移除焦点后才会启动。 http://jsfiddle.net/1wrnL3jp/4/ vs http://jsfiddle.net/1wrnL3jp/5/

答案 1 :(得分:0)

http://jsfiddle.net/7mwge85c/

HTML

$ docker run -it --name test busybox sh
/ # nslookup test-service
Server:    127.0.0.11
Address 1: 127.0.0.11

Name:      test-service
Address 1: 172.18.0.3 test-service-2.test-nwk
Address 2: 172.18.0.2 test-service-1.test-nwk

脚本使用keyup或onfocus(焦点)

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