JQuery/JavaScript：遍歷表單域，執行計算，然後提交

Question

現在我的代碼非常「硬編碼」和重複。我想知道是否有更乾淨的方法來做到以下幾點。理想情況下，我想通過循環遍歷表單字段並用一條語句計算結果，但我正在努力弄清楚如何做到最好。

摘要：我有十個表單域，每個域都有一個用戶可能提供或可能不提供的十進制小數值。當用戶點擊提交時，它應該在輸入字段中添加一個值，並在當前HTML頁面上顯示一個值，然後插入到數據庫中。

首先，我從表單輸入字段獲取該值並將其轉換爲帶有兩位小數的數字。然後我從HTML獲取當前總數，並將這兩個數字相加。之後，我將這些數據注入表單輸入字段，以便將其存儲在$_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：（使用自舉3類）

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

這樣的事情應該工作。假設從用戶的角度來看的輸出/輸入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

相同前綴的關係，這似乎很直覺更改值用戶只需輸入。

創建，而不是更新的顯示值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*/}) 

Answer 2

「如果我允許用​​戶添加/刪除字段，那麼這有可能會有點粘」

在這種情況下，給你的領域一個類名。只要存在於附加字段中，它們都將被計算。

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

並反覆雖然所有，使用它們的ID作爲參考

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