blog.Ring.idv.tw

Submit, but No Page Refresh!!

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

2008-05-13 01:11:24

2 comments on "Submit, but No Page Refresh!!"

  1. 1. 呈現 說:

    哈哈,這招貼心...^^b

    我就是常填完直接按「Enter」的使用者之一...^^a

    2008-05-13 02:41:09

  2. 2. Shen 說:

    ㄎㄎ~ 咪兔!! ^^v
    緊接著「Swiler」線上版介面就靠你了~

    2008-05-13 10:33:29

Leave a Comment

Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment