JQuery/JavaScript：迭代表单字段，执行计算，然后提交

现在我的代码是非常“硬编码”和重复的。我想知道是否有更干净的方法来做以下事情。理想情况下，我希望用循环遍历表单字段，并用一条语句计算结果，但我正在努力找出最好的方法

摘要：我有十个表单字段，每个字段都有一个不同的十进制值，用户可以提供也可以不提供。当用户点击submit时，它应该在输入字段中添加一个值，该值显示在当前HTML页面上，然后插入到DB中

首先，我从表单输入字段中获取该值，并将其转换为一个小数点后两位的数字。然后我从HTML中获取当前的总数，并将这两个数字相加。之后，我将总数注入表单输入字段，以便将其存储在

$\u POST

中并插入数据库

我怎样才能使我的代码更加枯燥（即，不要重复你自己）？下面只是两个示例，但除了元素调用外，它们完全相同：

var subtotal = Number($("#housing").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-housing').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#housing').val(total);

var subtotal = Number($("#utilities").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-utilities').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#utilities').val(total);

我想像这样迭代输入字段，但我想弄清楚如何显示其中的逻辑：

var input = $('.form-expenses :input');
input.each(function() {
    // Insert switch statement here??  Some other construct??
});

HTML:（使用Bootstrap 3类）

表格：

住房
$ 
公用事业
$
...
更新

输出：

<tr>
  <td>Housing</td>
  <td id="output-housing">$<?php echo $total['housing']?></td>
</tr>

<tr>
  <td>Utilities</td>
  <td id="output-utilities">$<?php echo $total['utilities']?></td>
</tr>

住房
$
公用事业
$

像这样的东西应该可以用。假定输出/输入ID的前缀关系相同

$(function() {
  $('form.form-expenses').submit(function() {
    updateValues();
    return false/* prevent submit for demo only*/
  })
})

function updateValues(){
  $('.form-expenses :input').not('#update-expenses').each(function(){
    var $input=$(this), inputId=this.id;
    var curr=$('#output-'+inputId).text().replace("$", "");
    $input.val(function(i,val){
      return (1*(val ||0) + 1*curr).toFixed(2);
    })
  });
}

从UI的角度来看，更改用户刚刚输入的值似乎非常违反直觉

要创建ajax数据对象而不是更新显示值，请执行以下操作：

function getAjaxData(){
  var ajaxData={}
  $('.form-expenses :input').not('#update-expenses').each(function(){
    var $input=$(this), inputId=this.id;
    var curr=$('#output-'+inputId).text().replace("$", "");
    ajaxData[this.name] =(1*(val ||0) + 1*curr).toFixed(2);
  });
  return ajaxData
}

/* in submit handler*/

$.post('path/to/server', getAjaxData(), function(response){/*do something with reponse*/})

“如果我允许用户添加/删除字段，这可能会有点棘手”

在这种情况下，为字段指定一个类名。只要在添加的字段中存在，它们都将被计算

<input type="text" class="form-control calculate-me" name="housing" id="housing" />

---

我们正在使用的相关html是什么？@DavidThomas我会将其添加到中。与您最后的评论相关。我同意，我在提交时添加了

$（'.form expenses:input'）.val（''）

立即隐藏该值，以便用户看不到。对于用户来说，它看起来就像他们输入了一个值，然后它被添加到HTML中。但是，如果您有更好的想法，请让我知道。如果通过ajax提交，我将不使用表单…只发送计算出的数据。不确定你的完整UI是如何工作的……但必须考虑可能出现的任何帖子问题（例如丢失连接）。我现在使用Ajax通过表单发送数据，然后使用JavaScript立即显示它。除了表单输入，还有其他方法可以将数据发送到DB吗？也许可以在jQuery

$.ajax（）方法本身内部进行计算？创建要发送的数据对象非常容易…我只是更新了答案，我喜欢这种方式，因为它非常简单。但是，我仍然需要硬编码refs数组。老实说，我的字段不会经常更改，所以这不是什么大不了的事情，但是如果我允许用户添加/删除字段，那么这可能会有点棘手。。。
<input type="text" class="form-control calculate-me" name="housing" id="housing" />

$(".calculate-me").each(function(){
    var ref=this.id;
    var subtotal = Number($("#" + ref).val());
    subtotal = (subtotal).toFixed(2);
    var currentTotal = $('#output-' + ref).html().replace("$", "");
    var total = Number(subtotal) + Number(currentTotal);
    $('#' + ref).val(total);
});