jQuery提交，我怎麼知道提交按鈕被按下了什麼？

我使用ajaxSubmit插件發送Ajax表單，但由於某種原因，此插件不會發送input[type=image]的名稱/值。所以現在我在捕獲提交事件之前ajaxSubmit將處理表單，我需要知道是否有可能找出哪個按鈕被按下？jQuery提交，我怎麼知道提交按鈕被按下了什麼？

來源

2010-01-28 newbie

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

，如果你wan't事件控制（表單提交）

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

告訴我的東西，如果它的工作;）

來源

2010-01-28 11:23:10 CuSS

我用類似的東西。我綁定點擊其他按鈕並添加隱藏字段，所以現在服務器獲取正確的信息... – newbie 2010-01-29 19:47:25

這會抓住任何一個輸入元素開始提交：

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

來源

2010-01-28 11:32:10 karim79

嗨，thanx建議，但它沒有奏效。 – newbie 2010-01-28 13:14:52

如果你做'$（'＃form：input'），這個方法會更好，點擊（函數（）{'用'click'代替'focus'。 – olofom 2012-10-24 13:18:43

如果你按下return，則不會觸發點擊。您需要使用[...]。bind（'click focus'，function（）{[...]}）[0123] []] – iRaS 2013-07-31 14:55:55

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

來源

2011-01-28 20:43:06 Janckos

以下是我認爲如何完成問題的更全面的例子。您應該用您的ID表格替換「＃您的表格」，並將您的表格按鈕上的值替換爲「Button One」&「」Button Two「。

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

來源

2011-08-18 18:42:49 drupalfever

這就是我解決它的方法。我受到了上面發佈的一些答案的啓發，但是我需要一種能夠適用於我所有表單的方法，因爲我已經動態地加載了它們。

我注意到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數組）。我想，如果我想保持真實的行爲，我會添加提交按鈕的值或innerHTML，但我通常只是檢查它是否被設置，因此它是無用的:)。

來源

2011-09-06 20:58:13 Gazillion

迄今爲止我見過的最佳答案。 – 2012-04-18 13:22:53

這是我使用（在其他輕微的變化，使用鼠標鬆開和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')); 
});

來源

2011-10-15 12:21:48 thaddeusmt

謝謝@thaddeusmt。它的作品很好 – AnNaMaLaI 2012-11-23 07:06:57

這個作品完美。:) – codesnooker 2013-09-19 13:08:38

我發現這是非常有用的。它涵蓋了點擊的情況，並且還提交了選項卡索引並觸及空間或進入。它在提交之前捕獲最後一個輸入，並且這是提交的按鈕，所以你可以有幾個按鈕，並檢查每個按鈕作爲目標執行一些獨特的事情。

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

來源

2012-09-25 15:02:20

嗨答案沒有說服我這麼多在這裏帶來替代。我要做的是通過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

來源

2015-11-04 23:00:46 MaNu

jQuery提交，我怎麼知道提交按鈕被按下了什麼？

回答

相關問題