javascript - JQuery/JavaScript : Iterate through form fields, 执行计算，然后提交

Question

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

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

首先，我从表单输入字段中获取该值并将其转换为具有两位小数的数字。然后，我从 HTML 中获取当前总数并将两个数字相加。之后，我将该总计注入(inject)回表单输入字段，以便可以将其存储在 $_POST 中并插入到数据库中。

如何使我的代码更加 DRY(即不要重复自己)？下面只是两个示例，但除了元素调用之外，它们完全相同:

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

表格:

<form class="form-expenses form-horizontal" role="form" method="post" action="/profile/update">
    <div class="form-group">
        <label for="housing" class="control-label col-sm-3">Housing</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span> 
          <input type="text" class="form-control" name="housing" id="housing" />
        </div>
    </div>
    <div class="form-group">
        <label for="utilities" class="control-label col-sm-3">Utilities</label>
        <div class="input-group input-group-lg col-sm-9"> 
            <span class="input-group-addon">$</span>
          <input type="text" class="form-control" name="utilities" id="utilities" />
        </div>
    </div>
...
<button class="btn btn-lg btn-primary btn-block" id="update-expenses" type="submit"> Update</button>

</form>

输出:

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

Answer 1

像这样的东西应该可以工作。假定输出/输入 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);
    })
  });
}

DEMO

从 UI Angular 来看，这对于更改用户刚刚输入的值似乎非常违反直觉。

创建 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*/})