Submit, but No Page Refresh!!

自從2005年Jesse James Garrett提出了「Ajax: A New Approach to Web Applications」之後~ 使得網路應用程式蔚為風潮~

更完全巔覆「<form>...</form>」的操作模式~ 取而代之的則是一大堆「Document Object Model」~

重點來了~ 我們來考慮下述這一個情況：

<script>
function doSearch()
{
	var value = document.getElementById("keyword").value;
	alert(value);
}
</script>
<input type="input" id="keyword" size="15"/>
<input type="submit" value="search" onClick="doSearch();"/>

這個簡單的頁面測試，若是在IE上執行的話~ 當我們在文字輸入欄位填入一些關鍵字之後~ 接著直接按鍵盤上的「Enter」~ IE會為我們馬上提交送出!

然而~ 在Firefox卻不是那麼回事~ 你會發覺同樣的程式及語法在Firefox上按「Enter」之後~ 根本毫無作用~

這對於使用者的操作行為的確會造成大問題~ 因為使用者習慣在輸入文字之後~ 通常會直接按下「Enter」送出資料~

好了~ 或許有人會說那乾脆用「<form>...</form>」的方式來處理不就好了~ 的確~ 這能解決一部份的問題~ 但，如果你的網頁應用程式是採用「Ajax」技術的話~ 怎麼可以讓頁面Refresh呢!! 這不就又走回頭路了...

所以~ 我們需要一種方式來解決這樣的問題~

由於今天剛好在開發Ajax應用程式~ 未來的「Swiler」線上版應該也會用到~ 所以花了一點時間嘗試著解決這樣的問題~

Submit, but No Page Refresh!!

<script>
function doSearch()
{
	var value = document.getElementById("keyword").value;
	alert(value);
	return false;
}
</script>
<form onSubmit="return doSearch();">
<input type="input" id="keyword" size="15"/>
<input type="submit" name="dowiki" value="search"/>
</form>

我的解法只是用了個小技巧~ 仍然採用「<form>...</form>」的方式~ 重點就在於我加了個「onSubmit="return doSearch();"」，並且「doSearch()」這個Function是永遠回傳「false」，如此不就達到「Submit, but No Page Refresh!!」~ 開開心心地去用「Ajax」吧~ ^^v