1

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

3 回答 3

2

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

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

方法一

处理 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);

方法二

使用 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);
于 2009-12-31T20:14:52.933 回答
0

这是一个简单的解决方案

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

您可以删除隐藏的输入

如果单击第一个按钮，您的调度请求变量将设置为“保存用户”

或“删除用户”是第二次点击

于 2009-12-22T05:51:00.147 回答
0

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

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

另外，我不喜欢 Gabriel 建议的任何解决方案。使用链接按钮会使我应用于提交按钮的所有自定义样式无效，使用 mousedown 处理程序会丢失一些单击的用户界面语义，并且由于某种原因 YUI 按钮丢失了我给提交按钮的原始名称的跟踪或者，至少，它没有出现在服务器端的 POSTed 值中。然而，本着 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}});

...

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

于 2012-05-28T16:00:14.567 回答