Question

我正在为我的项目使用YUI 2.7.0和Struts，并且有一个带有两个提交按钮的表单。一个用于保存，另一个用于删除。表单提交DispatchAction。我成功地添加了onclick监听器，但问题是表单在监听器执行之前提交。我需要在表单提交之前设置dispatch参数。我该怎么做呢？以下是我到目前为止：

<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小部件代码处理click事件，在其中，他们以编程方式提交表单。他们的事件处理程序在您之前调用，因此在您的事件处理程序被调用之前提交表单。

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

方法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 Button失去了原始名称的跟踪我给了提交按钮或者，至少，它没有出现在服务器端的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是在点击时提交表单，另一个解决方案应该只是抓住表单的提交事件并检查事件目标是否是你的按钮，做你需要做的事情，然后让提交去或停止它，根据需要。

yui提交按钮和发送动作

3 个答案: