關於多提交按鈕的表單提交問題(用客戶端代碼判斷被點擊的按鈕)

問題描述:假設有一個留言板,在管理員頁面有“回覆“和“刪除“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()")
這樣一來,整個問題就解決了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章