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

Question

Right now my code is very "hard-coded" and repetitive. I'd like to know if there is a cleaner way to do the following. Ideally, I want to iterate through my forms fields with a loop and calculate the results with one statement, but I'm struggling to figure out how best to do so.

Summary: I have ten form fields, each with a distinct decimal value that a user may or may not supply. When the user hits submit, it should add the value in the input field with a value being displayed on the current HTML page, then insert into the DB.

First, I grab that value from the form input field and convert it into a number with two decimal places. I then grab the current total from the HTML and add the two numbers together. After that I inject that total back into the form input field so that it can be stored in $_POST and inserted into a database.

How can I make my code more DRY (ie, Don't Repeat Yourself)? Below are just two examples but they are exactly the same except for the element calls:

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

I would like to iterate through my input fields like so, but I'm trying to figure out how I could display the logic inside:

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

HTML: (Uses Bootstrap 3 classes)

FORM:

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

OUTPUT:

<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

Something like this should work. Assumes the same prefixing relationship of output/input ID's

$(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);
    })
  });
}

<kbd>DEMO</kbd>

From a UI perspective, this seems very counter intuitive to change values that user just input.

To create ajax data object instead of updating the display values:

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