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>

===========================================================

參考資料:

「Gilbert.tw」-「JavaScript 字串轉數值」
「藍色小舖」-「如何讓後面欄位值等於前面兩個欄位相乘的結果？」
「JavaScript」-「運算子 (Operator)」