透過「JavaScript」可以做出「網頁」動態「效果」，不必透過「Upload」回傳「Server」，就能「展示」網頁「效果」，最近「設計」「訂購單」，需要使用「金額」和「加總」，無意間「釐清」許多「觀念」，網頁「設計畫面」如下
透過「Form (表單)」、「Text (文字欄位)」、「Select ( 選取 /清單 )」、「Button (按鈕)」，設計出「訂購清單」
透過「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>
===========================================================
參考資料:
