Question

我正在使用ajaxSubmit插件发送Ajax表单，但由于某些原因，此插件不会发送input[type=image]的名称/值。所以现在我在ajaxSubmit处理表单之前捕获提交事件，我需要知道是否有可能找出按下了什么按钮？

Answer 1

这将捕获提交提交的任何输入元素：

$(document).ready(function() {
    var target = null;
    $('#form :input').focus(function() {
        target = this;
        alert(target);
    });
    $('#form').submit(function() {
        alert(target);
    });
});

Answer 2

$("input .button-example").click(function(){
//do something with $(this) var
});

PS：你有jQuery控制$ var吗？否则你必须这样做：

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("input .button-example").click(function(){
    //do something with jQuery(this) var
       alert(jQuery(this));
    });
});

如果您想控制事件（表单提交）

$(document).ready(function(){
    $("#formid").submit(function() {
          alert('Handler for .submit() called.');
          return false;
    });
});

告诉我一些是否有效;）

Answer 3

这就是我正在使用的（其他人略有不同，使用mouseup和keyup事件而不是焦点）：

var submitButton = undefined;
$('#your-form-id').find(':submit').live('mouseup keyup',function(){
    submitButton  = $(this);
});
$('#your-form-id').submit(function() {
    console.log(submitButton.attr('name'));
});

Answer 4

以下是我认为如何完成你所要求的更全面的例子。您应该将“＃your-form ”替换为您的ID表单，并替换“ Button One ”＆amp; “按钮2 ”，其中包含表单按钮上的值。

$(document).ready(function() {
  var target = null;
  $('#your-form-id :input').focus(function() {
    target = $(this).val();
  });
  $('#your-form-id').submit(function() {

    if (target == 'Button One') {
      alert (target);
    }
    else if (target == 'Button Two') {
      alert (target);
    }
  });
});

Answer 5

这就是我解决它的方式。我受到上面发布的一些答案的启发，但我需要一种适用于我所有表单的方法，因为我动态加载它们。

我注意到ajaxSubmit有一个data选项，插件描述了以下内容：

包含应与之一起提交的额外数据的对象形式。

这正是我们所需要的。

所以我在我的提交按钮上附加了click处理程序并使用jQuery保存了元素（我更喜欢这种方法而不是添加假属性）：

$('[type="submit"]').live('click', function(e){
        jQuery.data( $(this).parents('form')[0], 'submitTrigger', $(this).attr('name'));
});

然后在我的ajaxSubmit调用中，我构建了数据对象并将其发送如下：

function dialogFormSubmit( form ) {
    var data = {}
    data[jQuery.data( form, 'submitTrigger')] = true;
    $(form).ajaxSubmit({ 
        data: data
    });
    return false;
}

我构建了数据对象，因为我希望它的行为方式与我用vanilla HTML / PHP提交它的方式相同（输入的名称是$ _POST数组中的键）。我想如果我想坚持其真实行为，我会添加提交按钮的值或innerHTML，但我通常只是检查它是否已设置，因此它是不必要的：）。

Answer 6

我发现这非常有用。它涵盖了点击的情况，还提交了标签索引和点击空格或输入。它会在提交之前捕获最后一个输入，这是提交的按钮，因此您可以使用多个按钮并将每个按钮作为目标来检查以执行独特的操作。

$('#form input').live('focusin focusout mouseup', function() {
    // Add a data attribute to the form and save input as last selected
    $('#form').data('lastSelected', $(this));
});
$('#form').submit(function() {
    var last = $(this).data('lastSelected').get(0);
    var target = $('#button').get(0);
    console.log(last);
    console.log(target);
    // Verify if last selected was our target button
    if (last == target) {
        console.log('bingo');
        return false;
    }
});

Answer 7

$(document).ready(function() {
    var clickedVar = null;
    $('#form :submit').focus(function() {
         clickedVar = $(this).attr("name");
         alert(clickedVar);
    });
});

Answer 8

嗨，答案并没有让我在这里说服其他人。我要做的是通过JS验证按下了哪个按钮。

<head>
<script>
$('body').click(function(event) {
     var log = $('#log');
     if($(event.target).is('#btn1')) {
        log.html(event.target.id + ' was clicked.');
        return false;
    }else{
        if($(event.target).is('#btn2')) {
           log.html(event.target.id + ' was clicked.');
           return false;
              }
         }
});
</script>
</head>
<body>
   <form id="formulario"  method="post">
      <div id="log"></div>
      <input type="submit" id="btn1" value="Btn 01">
      <input type="submit" id="btn2" value="Btn 02">
  </form>
</body>

使用此页面进行测试Test

Saludos

jQuery提交，我怎么知道按下了什么提交按钮？

8 个答案: