使用javascript区分表单中的两个提交按钮

Question

如何找出在javascript中点击了哪个提交按钮？

function submitForm(){
   //if find open popup
   //else if add continue in the same window

}

<form action="/findNames" onsubmit="return submitForm()">
    <input type="submit" value="Add" onclick="submitForm(this)"/>
    <input type="submit" value="Find" onclick="submitForm(this)"/>
</form>

---

我做了什么:

我尝试用onclick来做,如下所示,但是当点击"查找"按钮时,它会打开一个弹出窗口并提交父窗口.如何阻止它提交父窗口？

function submitForm(submit){
    if(submit.value=="Find"){
        find();//opens a popup window
    }else if(submit.value == "Add"){
        //stay in the same window
    } 
}

function find(){
    var width  = 1010;
    var height = 400;           
    var params = 'width='+width+', height='+height;     
    popupWin = window.open('find.do','windowname5', params);
    popupWin.focus();
}

<form action="/findNames">
    <input type="submit" value="Add" onclick="submitForm(this)"/>
    <input type="submit" value="Find" onclick="submitForm(this)"/>
</form>

Answer 1

一个input的type="submit"总是会提交表单.使用input的type="button",而不是创建一个按钮,不提交.

Answer 2

您走在正确的轨道上，但您的表单始终被提交，因为您没有取消事件（或者，用 DOM Level 2+ 的说法，您没有 \xe2\x80\x9c 阻止事件的默认操作\xe2\x80\ x9d）。

\n\n

function submitForm (button)\n{\n  if (button.value == "Find")\n  {\n    /* open popup */\n    find();\n  }\n  else if (button.value == "Add")\n  {\n    /* stay in the same window */\n  } \n\n  return false;\n}\n\n<form action="/findNames">\n  <input type="submit" value="Add" onclick="return submitForm(this)"/>\n  <input type="submit" value="Find" onclick="return submitForm(this)"/>\n</form>\n

\n\n

（您永远不应该命名与表单相关的变量，submit因为如果您不小心，它会覆盖form对象的submit方法。）

\n\n

返回值false，当返回到事件处理程序时，会阻止事件的默认操作click。这意味着用户代理的工作方式就像提交按钮从未被激活一样，并且表单也没有提交。

\n\n

解决此问题的另一种方法是将标识单击的提交按钮的值保存在变量或属性中，并在submit事件侦听器中检查该值。这是有效的，因为根据定义，（提交按钮）click的事件发生在以下事件之前：inputsubmitform

\n\n

var submitName;\n\nfunction submitForm (form)\n{\n  if (submitName == "Find")\n  {\n    /* open popup */\n    find();\n  }\n  else if (submitName == "Add")\n  {\n    /* stay in the same window */\n  } \n\n  return false;\n}\n\nfunction setSubmit (button)\n{\n  submitName = button.value;\n}\n\n<form action="/findNames" onsubmit="return submitForm(this)">\n  <input type="submit" value="Add" onclick="setSubmit(this)"/>\n  <input type="submit" value="Find" onclick="setSubmit(this)"/>\n</form>\n

\n\n

（这只是一个例子。尽量减少全局变量的数量。）

\n\n

同样，当返回值false返回到submit事件处理程序时，会阻止表单被提交。true如果您明确希望在处理事件后提交表单，则可能需要返回submit。例如，您可能想要验证表单，如果验证成功，则通过该target属性在另一个框架中显示服务器响应。

\n\n

与在脚本代码中添加事件侦听器相比，事件处理程序属性的优点在于它运行时高效、向后兼容并且仍然符合标准。缺点是如果事件不冒泡，您可能必须重复事件处理程序代码。（这里不是问题。）

\n\n

其他人可能会说事件处理程序属性的缺点还在于标记和函数之间没有分离；但是，您应该对此做出自己的决定。在我看来，函数总是与特定的标记相关联，并且为了解决不同的 DOM 实现而跳来跳去是很少值得的。

\n\n

另请参阅：DOM 客户端对象交叉引用：DOM 事件

\n\n

这里最重要的是，无论您对客户端进行了哪些改进，表单都保持可访问性，即即使没有客户端脚本，它仍然可以与键盘一起使用。然后，您的服务器端脚本（此处：/findNames）可以作为后备，而客户端脚本可以避免不必要的往返，从而改善用户体验并减少网络和服务器负载。

\n