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

Differentiate between two submit buttons in a form using javascript

本文关键字：两个 按钮 提交 javascript 表单 使用      更新时间：2023-09-26

我怎样才能找出哪个提交按钮在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>

type="submit"的input总是提交表单。使用type="button"的input来创建一个不提交的按钮

您在正确的轨道上，但是您的表单总是被提交，因为您没有取消事件(或者，在DOM级别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事件侦听器中检查该值。这是因为根据定义，input的click事件(提交按钮)发生在form的submit事件之前:

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事件处理程序时，阻止表单被提交。如果您显式地希望表单在处理submit事件之后提交，则可能希望返回true。例如，您可能想要验证表单，如果验证成功，则通过target属性在另一帧中显示服务器响应。

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

其他人可能会说事件处理程序属性的缺点还在于标记和函数之间没有分离;不过，你应该自己拿主意。在我看来，函数总是与特定的标记联系在一起，而在不同的DOM实现之间跳跃是不值得的。

参见:DOM客户端对象交叉引用:DOM事件

这里最重要的是，不管你做了什么客户端改进，表单仍然是可访问的，也就是说，即使没有客户端脚本，它仍然可以与键盘一起工作。您的服务器端脚本(这里:/findNames)可以作为回退，然后，客户端脚本可以避免不必要的往返，改善用户体验并减少网络和服务器负载。

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

首先，定义作为侦听器的函数:

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/

看看这个:

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/

注:出于测试目的，我在onsubmit事件中设置了return false。第一个jsFiddle示例包含了自己的window.onload，因此您可能希望将window.onsubmit之外的所有内容添加到window.onload中，如http://jsfiddle.net/hescano/v9Sz2/1/(在Chrome, Firefox中测试)。

相关文章：