yui 提交按钮和调度操作

Question

我在我的项目中使用 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>

Answer 1

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

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

方法 1

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

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

使用 type=link 而不是 type=submit（默认）。他们仅在 type = Submit 时提交表单（我还没有对此进行足够的测试来查看表单是否仍然自行提交 - 您可能必须手动调用 form.submit()）

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

方法 3

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

无论您使用哪种方法，您都应该使用它来阻止表单提交：

YAHOO.util.Event.preventDefault(e); 

Answer 2

这是一个简单的解决方案，

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

您可以删除隐藏的输入

您的调度请求变量将设置为“保存用户”

，如果单击第一个按钮或单击第二个按钮，

Answer 3

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

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

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

...

<form id='form'>
    <input type="button" value=">" 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 = '>'

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

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

...

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