問題描述:假設有一個留言板,在管理員頁面有“回覆“和“刪除“2個功能,點擊回覆以後表單直接提交執行回覆操作,但點擊刪除時需要彈出一個確認框,當用戶確認以後才能提交執行刪除操作。顯然這裏就需要用到客戶端腳本。
下面是我的做法:
服務器端:使用VB.net
客戶端:適用JavaScript
表單的部分代碼如下:
<form id="Form1" method="post" runat="server" οnsubmit="return inputValidate()">
...
<asp:Button id="Button1" tabIndex="2" runat="server" Text="回覆"></asp:Button>
<INPUT type="reset" value="重置">
<asp:Button id="Button2" runat="server" Text="刪除"></asp:Button>
...
</form>
因爲表單有2個按鈕,所以表單提交前需要判斷提交的按鈕是哪個。可以採用下面語句
event.srcElement.id
或者
event.srcElement.value
來判斷是哪個按鈕提交了。
一開始你可能認爲這個判斷應該寫在inputValidate()函數裏面,在表單發生提交事件的時候判斷。
但實際上這是不行的,因爲我們需要的事件源是提交按鈕,那麼這個判斷就只能寫按鈕的click事件函數裏面。
但是這樣又如何控制表單提交呢,因爲和表單提交有關係的是submit事件函數。
好在click事件發生在submit事件之前
,這樣就有了下面的這個解決辦法:
設
一箇中間變量,在click事件發生的時候把event.srcElement.id或者event.srcElement.value保存下來
,在之後的submit事件中判斷這個中間值,然後採取不同的動作。
代碼如下:
<script language="javascript">
<!--
var bt;
function check(){
bt=event.srcElement.value
}
function inputValidate(){
if (bt=="刪除")
return confirm("確實要刪除留言嗎?");
else{
//do someting
}
return true;
}
//-->
</script>
如果細心的話,你會發現在上面的表單裏面我沒有爲刪除按鈕指定click事件的方法。這是因爲這個按鈕是一個服務器控件,如果你在標籤中指定onclick屬性內容,服務器將這個內容和一段服務器代碼關聯起來,而我門現在需要的是和客戶端代碼關聯。
怎麼解決呢?
好在服務器控件的Attributes屬性有Add方法,可以動態給控件加屬性和屬性的值。
這裏加的屬性就不會被誤認爲是綁定服務器端代碼了。
在Page_Load方法中加入下面代碼。
Me.Button2.Attributes.Add("onclick", "check()")
這樣一來,整個問題就解決了。