yui提交按钮和分派操作

我在项目中使用YUI 2.7.0和Struts，有一个带有两个提交按钮的表单。一个用于保存，另一个用于删除。表单提交给DispatchAction。我已经成功添加了onclick侦听器，但问题是表单在侦听器执行之前提交。我需要在表单提交之前设置分派参数。我该怎么做？以下是我目前的情况：

<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>

函数confirmDelete（msg）
{
如果（确认（味精））
{
返回setDispatchMethod（“删除”）；
}
其他的
返回false；
}
函数setDispatchMethod（methodName）
{
dispatchField=document.getElementById（“dispatch”）；
dispatchField.value=methodName
返回true；
}
var onClickSaveUser=函数（e）
{
返回setDispatchMethod（'save'）；
};
var onClickDeleteUser=函数（e）
{
return confirmDelete（'您确定要删除用户吗？'）；
};
新的YAHOO.widget.Button（“deleteUser”，{onclick:{fn:onClickDeleteUser}}）；
新的YAHOO.widget.Button（“saveUser”，{onclick:{fn:onClickSaveUser}}）；

这里有一个简单的解决方案

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

您可以删除隐藏的输入

如果单击第一个按钮，您的dispatch request变量将设置为“Save User”

---

或者“删除用户”是第二个被点击的按钮

问题是Yahoo的按钮小部件代码处理点击事件，并且在其中，他们以编程方式提交表单。他们的事件处理程序在您的事件处理程序之前被调用，因此表单在您的事件处理程序被调用之前被提交

以下是一些想法（它们都有效）：

方法1

处理mousedown事件而不是click事件（mousedown在单击之前激发）

方法2

使用type=link而不是type=submit（默认值）。只有当type=submit时，他们才会提交表单（我还没有对此进行足够的测试，以查看表单是否仍然自行提交-您可能需要手动调用form.submit（）

方法3

查看他们的代码，我注意到他们创建了一个隐藏字段，其中包含单击以提交表单的按钮的名称（仅该按钮）。输入标记必须有一个name属性，而您的没有，因此您必须添加一个。然后在服务器上，您只需检查隐藏字段的值（您的值属性）

无论使用哪种方法，都应使用此方法阻止表单提交：

YAHOO.util.Event.preventDefault(e); 

---

这个问题已经问了好几年了，但我仍然有一个使用YUI 2.9.0的项目，我刚刚遇到了同样的问题，所以我将分享我的解决方案，以防其他人发现自己也遇到同样的困境

关于这个问题，有几件事值得注意。首先，Gabriel描述的问题是，YUI 2.9.0按钮点击处理程序在调用点击处理程序之前提交表单在IE上不是问题，至少通过IE9是这样。在FireFox上，至少通过FF12，问题就出现了。我怀疑这在Chrome、Safari和大多数浏览器（如果不是所有浏览器的话）中也是一个问题，而且我在YUI按钮点击处理程序中看到了IE的一个特例

而且，我不喜欢加布里埃尔建议的任何解决方案。使用链接按钮使我应用于submit按钮的所有自定义样式无效，使用mousedown处理程序会丢失一些单击的用户界面语义，并且由于某种原因，YUI按钮会丢失我给submit按钮的原始名称，或者至少它没有显示在服务器端的发布值中。然而，本着Gabriel链接按钮的精神，我用默认情况下不提交的输入按钮替换了提交按钮，然后添加了一个隐藏的输入并亲自提交表单：

...

<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}});

...

。。。
...
功能启动调查（p_事件、p_AARG）{
var input=document.createElement（'input'）；
input.type='hidden'；
input.name=this.get（'name'）；
input.value=“”
var form=YAHOO.Dom.get（'form'）；
form.appendChild（输入）；
表单提交（）；
}
新的YAHOO.widget.Button（“开始调查”{onclick:{fn:start\u survey}}）；
...

---

最后，由于YUI在单击时提交表单，另一个解决方案应该是捕获表单的提交事件并检查事件目标是否是您的按钮，执行您需要执行的操作，然后根据需要让提交继续或停止它。

除了“dispatch”的值必须用作DispatchAction类中方法的名称。Hmm，听起来很接近，但缺少的元素是，如果按Delete User，我不希望提交表单，我可能在示例代码中没有明确表示（onClickDeleteUser应返回confirmDelete的值，该值应返回true/false）。不过，根据这个链接，它仍然是：@Gary：我已经在我的答案中添加了更多的细节。请看一看。

YAHOO.util.Event.preventDefault(e); 

...

<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}});

...