在回發後保留計算的jQuery總計

我使用jQuery和ASP.NET MVC 3與razor view engine。在回發後保留計算的jQuery總計

我有幾個可輸入數值的文本框。我有一個標籤控件，其中包含由jQuery計算的文本框總數。

我有以下的文本框和標籤（計算結果）：

<input id="GrossMonthlySalary" type="text" /> 
<input id="SpouseGrossMonthlySalary" type="text" /> 
<input id="AdditionalIncome" type="text" /> 
<input id="ChildSupportIncome" type="text" /> 

<label id="TotalMonthlyIncome" class="total-amount"></label>

在我的js文件我有以下幾點：

$(function() { 

    $('#GrossMonthlySalary, #SpouseGrossMonthlySalary, #AdditionalIncome, #ChildSupportIncome').keyup(function() { 
     var val1 = $('#GrossMonthlySalary').val(); 
     var val2 = $('#SpouseGrossMonthlySalary').val(); 
     var val3 = $('#AdditionalIncome').val(); 
     var val4 = $('#ChildSupportIncome').val(); 

     var totalMonthlyIncome = 
     (parseInt(val1, 10) || 0) + 
     (parseInt(val2, 10) || 0) + 
     (parseInt(val3, 10) || 0) + 
     (parseInt(val4, 10) || 0); 

     if (totalMonthlyIncome == 0) { 
     $('#TotalMonthlyIncome').text(''); 
     } 
     else { 
     $('#TotalMonthlyIncome').text(totalMonthlyIncome); 
     } 
    }); 
});

如果我點擊我的提交按鈕，出現錯誤，然後顯示錯誤，並且我的標籤控件和計算結果被清除。回帖後如何保留這些值？

就我計算結果的方式而言，另一個問題是好的還是有更好的辦法？

來源

2011-09-07 Brendan Vogt

提交表單上的錯誤來自ASP，您需要顯示ASP代碼/錯誤。你太大了。另外，不要削減+粘貼+調整的東西，它*壞*，使用數組。 Val1 val2 val3是可怕的代碼和數組的用途。 – Incognito

記住parseInt函數將失敗，第二它擊中一個非數字字符：

parseInt('$10') // NaN

至於計算總，因爲你是不是做了具體數值的任何額外的處理，你可以簡化整個事情通過使用類選擇器。

$('.incomes').keyup(function() { 

    var incomes = $('.incomes'), 
     totalDisplay = $('#TotalMonthlyIncome'), 
     totalVal = 0; 

    incomes.each(function() { 
     var matches = null; 
     // find the number to add to total 
     matches = $(this).val().match(/\d+/); 
     // not bothering with the regex on totalVal because we set it 
     totalVal = (matches !== null ? parseInt(matches[0],10) : 0) + parseInt(totalVal,10); 
    }); 
    totalVal = totalVal === 0 ? '' : totalVal; 
    totalDisplay.text(totalVal); 
});

來源

2011-09-07 15:14:42 bstakes

謝謝，但我將如何保留回發後的計算值？ –

該類是否必須在我的樣式表中定義？用什麼樣式？ –

該類不一定在樣式表中定義。這只是一種輕鬆獲取多個DOM節點的方法，因爲ID必須是唯一的。至於保留值，我不是ASP.NET的人，但基本的概念是，你將數據輸入到控制器，爲視圖設置這些值，在你的視圖中，你應該能夠設置 – bstakes

你的jQuery代碼看起來很好。我可以縮短一點（http://jsfiddle.net/JBqRj/4），但實際上並沒有優化任何東西。

如果你想將其發佈到服務器，那麼你應該只需要一個隱藏的文本字段添加到含有相同的值作爲標籤的形式：http://jsfiddle.net/JBqRj/5/

爲了留住繼張貼值錯誤，但是，您需要在您的ASP代碼中執行此操作。只需填寫表單字段（包括隱藏字段）和發佈的相同字段即可。

來源

2011-09-07 12:48:56 Blazemonger

這通常是不好的做法。嘗試並在那裏添加另外20行，會發生什麼？ – Incognito

@mblase：我並不擔心將總數發佈到服務器，只是在鍵入值時向用戶顯示。 –

@Incognito：什麼是壞習慣？ –

在回發後保留計算的jQuery總計

回答

相關問題