提交和计算

Question

HTML

`

 <fieldset id="persoon">
  <legend>mijn gegevens</legend>
 <table>



<tbody><tr>
 <td>
  <label for="bg">Auto gebruik   1 op</label>
  </td>
  <td>
   <input id="bg" name="bg" size="30" type="number" placeholder="Benzine gebruik?">
  </td>
 </tr>

<tr>
  <td>
   <label for="kilometer">kilometer per jaar</label>
   </td>
   <td>
     <input id="kilometer" z="" name="kilometer" size="30" type="number" placeholder="ex: 120000 km/pj">
    </td>
  </tr>
  <tr>
      <td>
    <label for="benzine">prijs benzine </label>
    </td>
    <td>
    <input id="benzine" name="benzine" size="30" type="number">
    </td>
  </tr>
  <tr>
  <td>
  <input id="submit" type="submit" value="bereken"> </td><td>
  </td></tr>
  <tr>
      <td>
    <label for="berekening">Besparing </label>
    </td>
    <td>
    <input id="berekening" name="berekening" size="30" type="number">
    </td>
  </tr>

`

Javascript/Jquery

$('#submit').click(function(evt) {
evt.preventDefault(); // this will prevent the form from being submitted
var bg = parseFloat($('#bg').val());  // parseFloat for floating point
var bf = parseFloat($('#kilometer').val());
var bd = $('bf').val($('bf').val() + $('bf').val() / bg);
var bz = parseFloat($('#benzine').val());
var total = bz * bd ;
total = total.toFixed(2);

});

好吧，我想要完成的是有人填写表格：

  1: howmany kilometers on 1 liter gas
  2: howmany kilometers you drive a year
  3: howmuch the gas costs
         submit
  4:calculation

有人输入他们的东西后，你按“bereken”，它应该计算所有内容并将其放在“besparing”输入字段中，但它不起作用，我找不到任何人来帮助我。

我对此很陌生

Answer 1

使用输入类型按钮而不是输入类型提交。 Submit 用于提交表单。

而不是让 .submit 在你的 jquery 中使用 .click

编辑：此外，从 html 输入中检索值的代码需要在函数中，否则 javascript 中的这些值将不会更新。

伪代码

1. Create function which is call on click using javascript .click function
2. Add in code that retreieves values from fields inside this click function
3. Calculate
4. Output result

这一切都应该在一个函数中完成。

Answer 2

你可以这样做：

$('#submit').click(function(evt) {
   evt.preventDefault(); // this will prevent the form from being submitted
   // your calculations here
});

无需更新 .blur()，您可以在 click 函数中完成所有操作 - 这样您就不会不必要地使用变量填充全局命名空间

我不确定你的计算是否正确 - 你可能想检查 .val() 是否返回一个数字......看看 parseFloat 和 parseInt 即

var bg = $('#bg').val();

应该是

var bg = parseFloat($('#bg').val());  // parseFloat for floating point

这个

var bd = $('#bf').val(+$('bf').val() / bg);

不会工作 - 你需要做类似的事情

var bd = $('#bf').val($('#bf').val() + $('bf').val() / bg);

我建议您首先获取所有值

var bd = parseFloat($('#bf').val());
var km = parseFloat($('#kilometer').val());
var bf = parseFloat($('#bf').val());
var bg = parseFloat($('#bg').val());

然后用变量来计算（例如）

var total = bd + km;