唯提交按钮和派遣行动

StackOverflow https://stackoverflow.com/questions/1944355

  •  20-09-2019
  •  | 
  •  

题

我使用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>
有帮助吗？

解决方案

问题是雅虎的按钮组件代码处理click事件，并在其中，他们编程方式提交表单。他们的事件处理程序之前，你叫，所以形式事件处理程序甚至被调用之前提交。

下面是一些想法（它们都工作）：

方式1

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

使用类型=链路代替类型=提交（默认）。他们只提交表单，如果类型=提交（我没有测试过这还不够，看看是否仍形式本身提交 - 您可能必须手动调用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);

其他提示

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

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

可以去除隐藏输入

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

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

此问题是几年前的，但我仍然使用YUI 2.9.0有一个项目，我只是碰到了同样的问题，所以我会分享我的情况下，别人发现自己在同一个果酱的解决方案。

几件事情值得注意这个问题。首先，问题加布里埃尔介绍，这里的YUI 2.9.0按钮单击处理程序提交表单的点击处理程序之前被调用不在IE有问题，至少通过IE9。通过至少FF12火狐，出现问题。我怀疑这也将是在Chrome，Safari浏览器的一个问题，也是最如果不是所有其他的浏览器，以及我看到的似乎是在YUI按钮单击处理程序对IE的一个特例。

另外，我不喜欢任何解决方案加布里埃尔建议的。使用链接按钮失效我已经应用到我的提交按钮的所有自定义样式，用鼠标按下处理程序失去了一些点击的用户界面语义的，出于某种原因，YUI巴顿失去了原来的名字的田径运动，我给了提交按钮或者，至少，它没有显示在服务器侧所张贴的值。在加布里埃尔的链接按钮的精神，但是，我替换的输入按钮，默认不提交的提交按钮，然后添加一个隐藏的输入并提交表单自己：

...

<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被提交上点击的形式，另一种解决方案应该是刚好赶上表单提交事件，并检查事件的目标是你的按钮，你需要做什么，然后让提交走或停它，根据需要。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top