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

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

函数submitForm（）{
//如果找到打开的弹出窗口
//如果添加，则在同一窗口中继续
}

---

我尝试过的：

我试着用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>

函数提交表单（提交）{
if（submit.value==“Find”）{
find（）；//打开一个弹出窗口
}否则如果（submit.value==“添加”）{
//呆在同一个窗口
} 
}
函数find（）{
var宽度=1010；
var高度=400；
变量参数='宽度='+宽度+'，高度='+高度；
popupWin=window.open（'find.do'，'windowname5'，params）；
popupWin.focus（）；
}
一个
输入的
type=“submit”
将始终提交表单。使用
type=“button”
的
输入来创建一个不提交的按钮。
您的代码应该进行重构，以正确地附加事件侦听器

首先，定义将用作侦听器的函数：

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);
}

这是一个完整的工作演示：
请查看：

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>

var；
var buttons=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

标记：

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：

注意：出于测试目的，我在
onsubmit
事件中设置了
return false
。第一个JSFIDLE示例有自己的
窗口。包括onload
，因此您可能希望添加
窗口以外的所有内容。onsubmit
在
窗口内。onload
，就像这样（在Chrome、Firefox中测试）。
您的思路是正确的，但是表单总是提交的，因为您没有取消事件（或者，用DOM Level 2+的说法，您不是在“阻止事件的默认操作”）

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

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

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

其他人可能会说，事件处理程序属性的一个缺点是标记和函数之间没有分离；但是，你应该自己决定这一点。在我看来，函数总是与特定的标记联系在一起，在不同的DOM实现之间跳转是不值得的

另见：

这里最重要的一点是，不管您做了哪些客户端改进，表单都保持可访问性，也就是说，即使没有客户端脚本，它仍然可以与键盘一起工作。您的服务器端脚本（此处：
/findNames
）因此，可以作为回退，客户端脚本可以避免不必要的往返，改善用户体验，减少网络和服务器负载。
对此不确定，但您是否尝试将
name
属性添加到
input
标记中？为什么不将其拆分为两种形式？@piokuc我做了，但您如何访问当前的名称javascript中的属性值？您应该考虑使用事件侦听器拾取您的单击事件，而不是内联绑定您的函数调用（这是不推荐的）。您可以通过DOM访问表单、输入标记及其属性，我刚刚做了谷歌搜索"如何访问javascript@中的name属性值，有几页讨论了它。最初，我将其中一个作为按钮。此表单有很多输入字段，我的问题是，当我单击按钮时，我需要将这些输入字段中的值提交给服务器，只需使用带有
名称
标记的
输入
标记ttribute将其值提交到服务器。@Kninnug W3是垃圾，但在这种情况下是正确的。但是，表单控件的值未提交并不意味着表单未提交。注意，表单仍将提交。当您单击按钮而不是“提交”时，输入值不会被提交。我如何才能让它提交表单中的所有输入，即使您单击此“按钮”？@PointedEars fair point，但是Susie，您现在到底想要什么？表单必须同时在Add和Find案例中提交吗？错误：−1.不需要显式事件侦听器（它们是隐式的，带有事件处理程序属性），并且。是的，但是内联html事件处理程序被认为是不好的做法。此外，我知道attachEvent和addEventListener不一样：因此是条件语句。不，它们不是“不好的做法”；您一直在听错误的人讲话。而且您没有意识到其中的差异。IE8和以下版本不需要
附件
，它们可以