demoshop

有些時候我們希望使用者輸入一個值的時候可以即時幫他計算出總金額，如果跑後端程式是有點不符合效益，而且瘋狂的POSTBACK會讓使用者發狂的，所以我們直接利用Java Script來達到此效果。

◆我們先在頁面上拉兩個TextBox給使用者輸入和一個Label來秀出兩個TextBox相乘的數

▲aspx頁面

數量:<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>
<br />
單價:<asp:TextBox ID="TextBox2" runat="server">asp:TextBox>
<br />
總金額:<asp:Label ID="Label1" runat="server" Text="Label">asp:Label> 

▲cs頁面

protected void Page_PreRender(object sender, EventArgs e)
    {
        TextBox txt1 = this.TextBox1;
        TextBox txt2 = this.TextBox2;
        Label lab = this.Label1;
        txt1.Text = "";
       txt1.Attributes.Add("onkeyup", "document.getElementById('" + lab.ClientID + "').innerHTML" + "=parseInt(document.getElementById('" + txt1.ClientID + "').value" + "*document.getElementById('" + txt2.ClientID + "').value)");
    } 

♥小提醒：請注意我們是宣告在Page_PreRender事件中，所以頁面呈現後這段java script就會加上去了，還有因為上面只在txt1附加了java script所以只有在數量變動時才會作自動加總的計算，不過通常單價都是我們設定好的不可能給使用者輸入所以您可以利用以下的方式來變動

TextBox txt1 = this.TextBox1;
TextBox txt2 = this.TextBox2;
txt2.Text = "300";//在這裡設定初始值
Label lab = this.Label1;
txt1.Text = "";
txt1.Attributes.Add("onkeyup", "document.getElementById('" + lab.ClientID + "').innerHTML" + "=parseInt(document.getElementById('" + txt1.ClientID + "').value" + "*document.getElementById('" + txt2.ClientID + "').value)"); 

♥小提醒：再來的變化是如果說我們的單價包含小數點的時候，必須先將取出的值轉成小數後再把呈現的值轉成整數(除非您的金額可以包含小數)這時候java script就要這樣改

txt1.Attributes.Add("onkeyup", "document.getElementById('" + lab.ClientID + "').innerHTML"  + "=parseInt(parseFloat(document.getElementById('" + txt1.ClientID + "').value)" + "*parseFloat(document.getElementById('" + txt2.ClientID + "').value))"); 

重點就在於parseInt()和parseFloat()的轉換，如果沒有先轉的話計算出來的值一定是錯的