jquery學習之—構建功能型表單（二）

在構建功能型表單(一) 中介紹了一些適用於用戶進行文本性輸入的表單功能。

然而，有時候表單中的內容也會以數字爲主。

當處理作爲表單內容的數字值時，也可以實現另外幾種表單增強功能。

 

數字表單的典型代表就是購物車。在購物車表單中，應該允許用戶更新購買的商品數量，同時，也要爲用戶提供價格和總金額的數字反饋。

 

構建功能行表單（二）

1.在操作表單前先爲表格應用標準的行條紋效果，美化一下表格的外觀

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");
}

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");
}

 

2.拒絕非數字輸入
通過javascript，可以檢查用戶輸入的內容是否符合我們的要求，以便在將表單發送到服務器之前對用戶給出反饋，這種技術叫做輸入掩碼。
輸入驗證是根據某些有效輸入的標準來檢查用戶輸入的過程。輸入掩碼會在用戶填寫內容的同時應用標準，並簡單地禁止無效的按鍵操作。
比如，在這個購物車表單的例子中，必須在輸入字段中填寫數字。通過使用輸入掩碼驗證，可以在這些字段獲得焦點時，讓非數字按鍵操作不起作用

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

在這裏我們要觀察的是keypress事件，這個事件不提供keyCode屬性，但提供了charCode屬性。

調用preventDefault()方法會阻止瀏覽器響應相應的事件。

 

3.數字計算

表單中有個recalculate按鈕，單擊這個按鈕會把表單提交到服務器，重新計算總金額再把表單展示給用戶。但是這個往返過程是不必要的，所有工作都可以在瀏覽器中通過jquery來完成。

在shipping行中顯示訂購商品的數量。但用戶修改了其中一行的數量時，我們要合計所有輸入值以得到新的數量，然後將總數顯示在相應的單元格中。

$(".quantity input").change(function(){
    var totalQuantity = 0;
    $("#cart tbody tr").each(function(){
        var quantity = parseInt($(".quantity input",this).val());
        totalQuantity += quantity;
    });
    $(".shipping .quantity").text(String(totalQuantity));
});

$(".quantity input").change(function(){
	var totalQuantity = 0;
	$("#cart tbody tr").each(function(){
		var quantity = parseInt($(".quantity input",this).val());
		totalQuantity += quantity;
	});
	$(".shipping .quantity").text(String(totalQuantity));
});

我們只有在change事件發生時執行計算。這樣，只有當用戶離開字段並填寫了同以前不一樣的值時，纔會導致重新計算總數量。

 

a.解析和格式化貨幣值

var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
price = isNaN(price) ? 0 : price;
var cost = quantity * price;
$(".cost",this).text("$"+cost);

var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
price = isNaN(price) ? 0 : price;
var cost = quantity * price;
$(".cost",this).text("$"+cost);

 用正則表達式去掉價格前的貨幣符號，然後把得到的字符傳遞給parseFloat()，把價格轉成浮點數。

我們必須確保找到了數字值，如果沒有則將其設置爲0。最後，用價格乘以數量，再與$連接放到總費列中

 

b.處理小數位

用toFixed方法返回一個舍入到相應小數位後的浮點數的字符串

 

c.其他計算

1.合計subtotal行最後一列的總費用。

$(".quantity input").change(function(){
    var totalQuantity = 0;
    var totalCost = 0;
    $("#cart tbody tr").each(function(){
        var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
        price = isNaN(price) ? 0 : price;
        var quantity = parseInt($(".quantity input",this).val());
        var cost = quantity * price;
        $(".cost",this).text("$"+cost.toFixed(2));
        totalQuantity += quantity;
        totalCost += cost;
    });
    $(".shipping .quantity").text(String(totalQuantity));
    $(".subtotal .cost").text("$" + totalCost.toFixed(2));
});

$(".quantity input").change(function(){
	var totalQuantity = 0;
	var totalCost = 0;
	$("#cart tbody tr").each(function(){
		var price = parseFloat($(".price",this).text().replace(/^[^/d.]*/,""));
		price = isNaN(price) ? 0 : price;
		var quantity = parseInt($(".quantity input",this).val());
		var cost = quantity * price;
		$(".cost",this).text("$"+cost.toFixed(2));
		totalQuantity += quantity;
		totalCost += cost;
	});
	$(".shipping .quantity").text(String(totalQuantity));
	$(".subtotal .cost").text("$" + totalCost.toFixed(2));
});

 

2.計算稅金

爲了計算稅金，需要用相應的數字除以100得到稅率，再用合計金額乘以稅率。不過，計算稅金時總要向上舍入的，因此必須保證在顯示和計算時使用正確的值。

在這裏，我們用稅金乘以100會使它變成一個以分而不是元表示的值，通過Math.ceil()舍入這個值是安全的。舍入之後，再除以100就可以將這個值轉換回以元表示的值。

var taxRate = parseFloat($(".tax .price").text())/100;
var tax = Math.ceil(totalCost * taxRate * 100)/100;
$(".tax .cost").text("$" + tax.toFixed(2));
totalCost += tax;

var taxRate = parseFloat($(".tax .price").text())/100;
var tax = Math.ceil(totalCost * taxRate * 100)/100;
$(".tax .cost").text("$" + tax.toFixed(2));
totalCost += tax;

 

3.計算運費

用商品數量乘以單件商品的運輸費率就可以得到總運費

var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^/d.]*/,""));
var shipping = totalQuantity * shippingRate;
$(".shipping .cost").text("$" + shipping.toFixed(2));
totalCost += shipping;

var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^/d.]*/,""));
var shipping = totalQuantity * shippingRate;
$(".shipping .cost").text("$" + shipping.toFixed(2));
totalCost += shipping;

 

現在我們已經完全重寫了可能發生的任何服務器計算。因此，可以安全的隱藏recalculate按鈕了

 

4.刪除商品

如果購物者在把商品放到購物車中之後改變了注意，可以將相應商品的quantity字段修改爲0。然而，我們還可以提供一種更可靠的行爲，即爲每件商品都添加一個明確的delete按鈕。雖然單擊這個按鈕的實際效果與修改quantity字段相同，但這種視覺上的反饋可以強化不會購買相應商品的事實。

$("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");
$deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';
$("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");
$("img.clickable").click(function(){
    $(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");
});
$("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");

$("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");
$deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';
$("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");
$("img.clickable").click(function(){
	$(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");
});
$("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");

 

 

table.zip (40.1 KB)

 

 

 

轉自：http://ice-cream.javaeye.com/blog/326425