【问题标题】:jQuery submit, how can I know what submit button was pressed?jQuery提交,我怎么知道按下了哪个提交按钮?
【发布时间】:2010-01-28 11:18:36
【问题描述】:

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

【问题讨论】:

    标签: jquery plugins submit


    【解决方案1】:

    这将捕获启动提交的任何输入元素:

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

    【讨论】:

    • 如果你用click而不是focus来做$('#form :input').click(function() {,效果会更好。
    • 按回车键不会触发点击.. 可能你需要使用 [...].bind('click focus', function() {[...]})[ ...]
    【解决方案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;
        });
    });
    

    如果有效,请告诉我一些事情;)

    【讨论】:

    • 我用过类似的东西。我将点击绑定到另一个按钮并添加了隐藏字段,所以现在服务器可以获得正确的信息......
    【解决方案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'));
    });
    

    【讨论】:

      【解决方案4】:

      以下是我认为如何完成您所要求的内容的更全面的示例。您应该将“#your-form”替换为您的 id 表单,并将“Button One”和“Button Two”替换为 on您的表单按钮。

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

      【讨论】:

        【解决方案5】:

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

        我注意到 ajaxSubmit 有一个 data 选项,插件描述的该选项执行以下操作:

        一个包含额外数据的对象,应与该对象一起提交 表格。

        这正是我们所需要的。

        所以我在提交按钮上附加了点击处理程序并使用 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;
        }
        

        我以这种方式构建数据对象是因为我希望它的行为方式与我使用普通 HTML/PHP 提交它的方式相同(输入的名称是 $_POST 数组中的键)。我想如果我想忠实于它的真实行为,我会添加提交按钮的 value 或 innerHTML,但我通常只是检查它是否已设置,所以它是不必要的:)。

        【讨论】:

        • 迄今为止我见过的最佳答案。
        【解决方案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;
            }
        });
        

        【讨论】:

          【解决方案7】:
          $(document).ready(function() {
              var clickedVar = null;
              $('#form :submit').focus(function() {
                   clickedVar = $(this).attr("name");
                   alert(clickedVar);
              });
          });
          

          【讨论】:

            【解决方案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

            感谢

            【讨论】:

            • 当您使用键盘汇总表单时,这将不起作用。
            猜你喜欢
            • 1970-01-01
            • 2023-01-20
            • 2013-10-03
            • 2012-10-02
            • 2011-04-02
            • 2016-07-21
            • 2021-12-01
            • 1970-01-01
            相关资源
            最近更新 更多