1. 程式人生 > >處理一個表單有多個提交按鈕

處理一個表單有多個提交按鈕

在做到表單的提交的時候,如果是一個按鈕提交的話,對應一個action。只需要將form表單屬性method=”post” action=”action路徑”。

可是如果是多個按鈕,如何將一個表單與多個方法關聯呢?

思路是這樣的:先不指定表單的action,讓action屬性為"",method="post",為你的提交按鈕全部替換為普通按鈕,給它們都加上onclick事件,注意這裡每一個按鈕的onclick方法是一樣的,只是傳遞的引數不一樣,這裡的引數只是起到標記是哪一個按鈕的用。

最後根據onclick裡的方法傳遞的引數不同,可以判斷是來自哪一個按鈕的訊息,再為表單設定方法並提交。

這裡有個案例(釋出文章和將文章儲存到草稿箱):

<form id="myFrm" action="" method="post">
文章標題:<input name="articleTitile"/><br/>
文章內容:<textarea name="articleContent"><br/>
<input type="button" value="釋出文章" onclick="test(1)"/><br/>
<input type="button value="儲存到草稿箱" onclick="test(2)"/> 
</form>

<script type="text/javascript">
function test(val){
    //判斷引數
    if(val==1){  //釋出文章的方法
        var url = "去到釋出文章的Action";
        var params = $("#myFrm").serialize();
        //非同步處理
        $.post(url,params);
    }
    if(val==2){  //儲存到草稿箱
        var url = "去到草稿箱的Action";
        var params = $("#myFrm").serialize();
        //非同步處理
        $.post(url,params);
    }
}
</script>