yui提交按鈕和調度動作

我爲我的項目使用YUI 2.7.0和Struts，並且有一個帶有兩個提交按鈕的窗體。一個是保存，另一個是刪除。表單提交給DispatchAction。我已經成功添加了onclick監聽器，但問題是表單在偵聽器執行之前提交。我需要在表單提交之前設置調度參數。我該怎麼做呢？下面是我到目前爲止有：yui提交按鈕和調度動作

<form name="adminUserForm" method="post" action="manage_user.do"> 
    <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/> 
    <!-- other form fields here --> 
    <input type="submit" value="Save User" id="saveUser"> 
    <input type="submit" value="Delete User" id="deleteUser"> 
</form> 
<script type="text/javascript"> 
    function confirmDelete(msg) 
    { 
    if (confirm(msg)) 
    { 
     return setDispatchMethod("delete"); 
    } 
    else 
     return false; 
    } 
    function setDispatchMethod(methodName) 
    { 
    dispatchField = document.getElementById("dispatch"); 
    dispatchField.value = methodName 
    return true; 
    } 
    var onClickSaveUser = function (e) 
    { 
    return setDispatchMethod('save'); 
    }; 
    var onClickDeleteUser = function (e) 
    { 
    return confirmDelete('Are you sure you want to delete the user?'); 
    }; 
    new YAHOO.widget.Button("deleteUser", {onclick: {fn: onClickDeleteUser }}); 
    new YAHOO.widget.Button("saveUser",  {onclick: {fn: onClickSaveUser }}); 
</script>

來源

2009-12-22 Gary Kephart

問題是雅虎的Button小部件代碼處理點擊事件，並且在它中，他們以編程方式提交表單。他們的事件處理程序在你之前被調用，所以表單在事件處理程序甚至被調用之前被提交。

這裏有一些想法（他們所有的工作）：

方法1

處理MouseDown事件而不是click事件（點擊鼠標按下前觸發）。

var deleteUserButton = new YAHOO.widget.Button("deleteUser"); 
deleteUserButton.on("mousedown", onClickDeleteUser); 

var deleteUserButton = new YAHOO.widget.Button("saveUser"); 
deleteUserButton.on("mousedown", onClickSaveUser); 

//Using this, you can easily stop the form from submitting 
//by using YAHOO's event utility (by adding this code, you 
//will prevent the click event from firing as well). 

YAHOO.util.Event.preventDefault(e);

方法2

使用類型=鏈路代替類型=提交（默認）。他們只提交表單，如果類型=提交（我沒有測試過這還不夠，看看是否仍形式本身提交 - 您可能必須手動調用form.submit（））

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} }); 
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} });

方法3

看着他們的代碼，我注意到他們創建了一個隱藏字段，其中單擊了按鈕的名稱來提交表單（只有那個按鈕）。輸入標籤必須具有名稱屬性，而您的名稱不屬於，因此您必須添加一個。然後在服務器上，您只需檢查該隱藏字段的值（您的值屬性）。

無論其是否使用，你應該使用這個從停止提交表單這些方法：

YAHOO.util.Event.preventDefault(e);

來源

2009-12-31 20:14:52

嗯，聲音很接近，但缺少的元素，我可能沒有在我的示例代碼中明確表示（onClickDeleteUser應該返回confirmDelete的值，它應該返回true/false），如果按下Delete User，要提交表單。根據這個鏈接，但它仍然是： http://yuilibrary.com/forum/viewtopic.php?p=1216 – 2009-12-31 22:23:12

@加里：我已經添加了更多的細節，我的答案。請看一看。 – 2010-01-03 22:48:42

這裏有一個簡單的解決方案

<form> 
    <input type="submit" name='dispatch' value="Save User" id="saveUser"> 
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser"> 
</form>

你可以刪除隱藏的輸入

和您的調度請求變量將被設置爲「保存用戶」如果第一個按鈕被點擊

或「刪除用戶」是第二個被點擊

來源

2009-12-22 05:51:00 Dapeng

除了必須使用「dispatch」的值作爲DispatchAction類中方法的名稱。 – 2009-12-22 15:17:38

這個問題是幾年前的，但我仍然有使用YUI 2.9.0項目我只是遇到了同樣的問題，所以我會分享我的解決方案，以防其他人發現自己陷入同一個擁堵。

有幾件事值得注意這個問題。首先，Gabriel描述的問題是，在你的點擊處理程序被調用之前，YUI 2.9.0按鈕點擊處理程序提交表單在IE上不是問題，至少通過IE9。通過至少FF12在FireFox上發生問題。我懷疑在Chrome，Safari和大多數情況下（如果不是所有其他瀏覽器）也會出現問題，以及我看到YUI Button單擊處理程序中的IE特殊情況。

另外，我不喜歡Gabriel提出的任何解決方案。使用鏈接按鈕使所有我已經應用到我的提交按鈕的自定義樣式失效，使用mousedown處理程序會丟失點擊的某些用戶界面語義，並且出於某種原因，YUI Button正在失去跟蹤我提交提交按鈕的原始名稱的跟蹤或者至少它不在服務器端的POSTed值中顯示。在加布裏埃爾的鏈接按鈕的精神，但是，我替換的輸入按鈕，默認不提交的提交按鈕，然後添加一個隱藏的輸入並提交表單自己：

... 

<form id='form'> 
    <input type="button" value="&gt;" id="start_survey"> 

... 

function start_survey (p_oEvent, p_aArgs) { 
    var input = document.createElement ('input'); 
    input.type = 'hidden'; 
    input.name = this.get ('name'); 
    input.value = '&gt;' 

    var form = YAHOO.Dom.get ('form'); 
    form.appendChild (input); 
    form.submit(); 
} 

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}}); 

...

最後，由於YUI正在提交點擊表單時，另一個解決方案應該是捕獲表單的提交事件並檢查事件目標是否是按鈕，根據需要執行您需要執行的操作，然後讓提交或停止提交。

來源

2012-05-28 16:00:14 Derek

yui提交按鈕和調度動作

回答

相關問題