5

如何找出在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>
4

4 回答 4

7

An inputoftype="submit"将始终提交表单。使用inputoftype="button"来创建一个不提交的按钮。

于 2013-04-12T15:58:16.097 回答
4

您走在正确的轨道上，但您的表单总是被提交，因为您没有取消事件（或者，用 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事件之前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例如，您可能想要验证表单，如果验证成功，则通过target属性在另一个框架中显示服务器响应。

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

其他人可能会说 event-handler 属性的一个缺点是标记和函数之间没有分离；但是，您应该对此做出自己的决定。在我看来，函数总是与特定的标记相关联，并且为了解决不同的 DOM 实现而跳槽是不值得的。

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

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

于 2013-04-12T16:49:24.110 回答
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/

于 2013-04-12T16:12:43.440 回答
2

看一下这个：

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 中测试）。

于 2013-04-12T16:29:15.783 回答