我有一个.submit()事件设置表单提交。我在页面上也有多个表单,但对于这个示例,这里只有一个表单。我想知道哪个提交按钮在没有应用.click()事件的情况下被单击。

下面是设置:

<html>
<head>
  <title>jQuery research: forms</title>
  <script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
  <script type='text/javascript' language='javascript'>
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
  <input type='hidden' name='data' value='blahdatayadda' />
  <input type='submit' name='name1' value='value1' />
  <input type='submit' name='name2' value='value2' />
</form>
</body>
</html>

jsfiddle的实例

除了在每个按钮上应用.click()事件外,有没有办法确定哪个提交按钮被单击了?


当前回答

这是一个使用这个的例子。表单以获取提交的正确表单,数据字段用于存储最后单击/聚焦的元素。我还将提交代码包装在一个超时内,以确保在执行之前发生单击事件(一些用户在评论中报告,在Chrome上,有时在提交之后会触发单击事件)。

当使用键和鼠标/手指导航时,不指望浏览器在RETURN键上发送单击事件(虽然没有伤害),我为按钮和字段的焦点事件添加了一个事件处理程序。

您可以在项目中添加type="submit"按钮,当单击时保存它们自己。

在演示中,我设置了一个红色边框来显示所选项目,并设置了一个警告,显示名称和值/标签。

这是小提琴

下面是(相同的)代码:

Javascript:

$("form").submit(function(e) {
  e.preventDefault();
  // Use this for rare/buggy cases when click event is sent after submit
  setTimeout(function() {

    var $this=$(this);
    var lastFocus = $this.data("lastFocus");
    var $defaultSubmit=null;

    if(lastFocus) $defaultSubmit=$(lastFocus);

    if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
      // If for some reason we don't have a submit, find one (the first)
      $defaultSubmit=$(this).find("input[type=submit]").first();
    }

    if($defaultSubmit) {
      var submitName=$defaultSubmit.attr("name");
      var submitLabel=$defaultSubmit.val();

       // Just a demo, set hilite and alert
      doSomethingWith($defaultSubmit);
      setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
    } else {
      // There were no submit in the form
    }

  }.bind(this),0);

});

$("form input").focus(function() {
  $(this.form).data("lastFocus", this);
});
$("form input").click(function() {
  $(this.form).data("lastFocus", this);
});

// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
  $aSelectedEl.css({"border":"4px solid red"});
  setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}

HTML:假

<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>

<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>

愚蠢的CSS:

input {display:block}

其他回答

你可以创建input type="hidden"作为按钮id信息的holder。

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

在这种情况下,表单在提交时传递值“1”(按钮的id)。如果onClick发生在提交(?)之前,这是有效的,我不确定它是否总是正确的。

下面的方法似乎更符合我的目的。

首先,对于任何形式:

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

当为表单触发此单击事件时,它只是记录稍后要访问的原始目标(在事件对象中可用)。这是一个相当宽泛的描边,因为它将在表单上的任何地方触发任何单击。欢迎提供优化评论,但我怀疑它永远不会引起明显的问题。

然后,在$('form').submit()中,您可以查询上次点击的内容,例如

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

对我来说,最好的解决方案是:

$(form).submit(function(e){

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

提交表格时:

文档。activeElement将提供被单击的提交按钮。 document.activeElement.getAttribute('value')将给出该按钮的值。

注意,如果表单是通过按Enter键提交的,那么文档。activeElement将是当时关注的任何表单输入。如果这不是一个提交按钮,那么在这种情况下,可能没有“被点击的按钮”。

如果你不添加.click事件的意思是你不想为这些事件使用单独的处理程序,你可以在一个函数中处理所有的单击(提交):

$(document).ready(function(){
  $('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});

function process_form_submission( event ) {
  event.preventDefault();
  //var target = $(event.target);
  var input = $(event.currentTarget);
  var which_button = event.currentTarget.value;
  var data = input.parents("form")[0].data.value;
//  var which_button = '?';       // <-- this is what I want to know
  alert( 'data: ' + data + ', button: ' + which_button );
}