S小魚仔S 網誌搜尋

2012年11月25日 星期日

S小魚仔S JavaScript 加總運算

透過「JavaScript」可以做出「網頁」動態「效果」,不必透過「Upload」回傳「Server」,就能「展示」網頁「效果」,最近「設計」「訂購單」,需要使用「金額」和「加總」,無意間「釐清」許多「觀念」,網頁「設計畫面」如下

透過「Form (表單)」、「Text (文字欄位)」、「Select ( 選取 /清單 )」、「Button (按鈕)」,設計出「訂購清單

Java Script
=========================================

<script language="JavaScript">
function calculate(){

    //檢查 數量 欄位 有輸入資料,否則在做計算時,就會發生錯誤了
    if(FM.quantity_1.value != 0)
 {
    // 價格 欄位 與 數量 欄位 相乘 放入 金額 欄位
    FM.total_1.value = FM.price_1.value * FM.quantity_1.value ;
}
    else
{
    FM.total_1.value = '0' ;
}

//檢查 數量 欄位 有輸入資料,否則在做計算時,就會發生錯誤了
if(FM.quantity_2.value != 0)
    {
// 價格 欄位 與 數量 欄位 相乘 放入 金額 欄位
    FM.total_2.value = FM.price_2.value * FM.quantity_2.value ;
    }
    else
    {
    FM.total_2.value = '0' ;
    }

//計算總價格
FM.total_all.value=parseInt(FM.total_1.value, 10) + parseInt(FM.total_2.value, 10);

}
</script>
===========================================================



Body
===========================================================

<form action="URL" name="FM">
價格<input type="text" name="price_1" onBlur="calculate();">
數量
<select name="quantity_1" onBlur="calculate();">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
金額<input name="total_1" type="text" readonly="readonly" >
<!-- 換行 -->
  <p>
價格<input type="text" name="price_2" onBlur="calculate();">
    數量
    <select name="quantity_2" onBlur="calculate();">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
金額<input name="total_2" type="text" readonly="readonly"/>
  </p>
  <p>小記:<input name="total_all" type="text" readonly="readonly"/>   </p>
  <p>
    <input type="submit" name="button" id="button" value="送出"/>
  </p>
</form>
===========================================================

參考資料: