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来做，如下所示，但是当＆＃34; Find＆＃34;单击按钮，它会打开一个弹出窗口并提交父窗口。如何阻止它提交父窗口？

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的{{1}}将始终提交表单。使用type="submit"代替input来创建一个不提交的按钮。

Answer 2

您走在正确的轨道上，但您的表单总是因为您没有取消事件而提交（或者，在DOM Level 2+用语中，您并非“阻止事件的默认操作”。）

function submitForm (button)
{
  if (button.value == "Find")
  {
    /* open popup */
    find();
  }
  else if (button.value == "Add")
  {
    /* stay in the same window */
  } 

  return false;
}

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

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

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

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

form

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

同样，返回值var submitName; function submitForm (form) { if (submitName == "Find") { /* open popup */ find(); } else if (submitName == "Add") { /* stay in the same window */ } return false; } function setSubmit (button) { submitName = button.value; } <form action="/findNames" onsubmit="return submitForm(this)"> <input type="submit" value="Add" onclick="setSubmit(this)"/> <input type="submit" value="Find" onclick="setSubmit(this)"/> </form>，当返回到false事件处理程序时，会阻止提交表单。如果您明确希望在处理submit事件后提交表单，则可能需要返回true。例如，您可能希望验证表单，如果验证成功，则通过submit属性在另一个框架中显示服务器响应。

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

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

另请参阅：DOM Client Object Cross-Reference: DOM Events

最重要的是，无论您做出的所有客户端改进，表单都可以访问，i。即即使没有客户端脚本，它仍然可以与键盘一起使用。您的服务器端脚本（此处：target）可以作为后备，然后，客户端脚本可以避免不必要的往返，改善用户体验并减少网络和服务器负载。

Answer 3

应重构您的代码以正确附加事件侦听器。

首先，定义将充当听众的函数：

function preventSubmission(e) {
    if (e.preventDefault) e.preventDefault();
    return false;
}

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

然后，缓存对相关表单元素的引用：

var form = document.getElementById('my-form'),
    findButton = document.getElementById('find');

最后，将侦听器添加到DOM事件中：

if (form.addEventListener) {
    form.addEventListener("submit", preventSubmission);
    findButton.addEventListener("click", find);
} else {
    form.attachEvent("submit", preventSubmission);
    findButton.attachEvent("click", find);
}

这是一个完整的工作演示：http://jsfiddle.net/CQAHv/2/

Answer 4

检查出来：

<强>的Javascript ：

var clicked;
var buttons = document.getElementsByTagName("input");

for(var i = 0; i < buttons.length;i++)
{
    var elem = buttons[i];
    if(elem.type=="submit")
    {
        elem.addEventListener("click", function(){ clicked=this.value;}, false);
    }
}


window.onsubmit = function(e)
{
   alert(clicked);
    return false;
}

<强>标记：

<form action="/findNames">
    <input type="submit" value="Add" />
    <input type="submit" value="Find" />
</form>

您将获得点击任何按钮的值。

jsFiddle ：http://jsfiddle.net/hescano/v9Sz2/

注意：出于测试目的，我在return false事件中有onsubmit。第一个jsFiddle示例包含自己的window.onload，因此您可能希望添加window.onsubmit内window.onload内的所有内容，例如http://jsfiddle.net/hescano/v9Sz2/1/（在Chrome中测试，Firefox））。

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

4 个答案: