我怎样才能得到从表单提交事件提交的button？
我试图find触发表单提交的提交button的值
$("form").submit(function() { }); 我可能会为每个button触发一个$（“input [type = submit]”）。click（）事件，并设置一些variables，但这似乎不如从提交表单上的button。
我在这个答案中使用了document.activeElement ： 如何使用jQuery获得焦点元素？
$form.on('submit', function() { var $btn = $(document.activeElement); if ( /* there is an activeElement at all */ $btn.length && /* it's a child of the form */ $form.has($btn) && /* it's really a submit element */ $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') && /* it has a "name" attribute */ $btn.is('[name]') ) { console.log("Seems, that this element was clicked:", $btn); /* access $btn.attr("name") and $btn.val() for data */ } });
我利用这个事实，button总是单击它之后的焦点元素。 如果在点击之后立即执行blur() ，这将不起作用。
@Doin发现了另一个缺点。 如果用户通过在文本字段中enter来提交表单，则不会设置document.activeElement 。 你需要注意这一点，通过处理input[type="text"]和类似的keypress事件。
更新2017-01：对于我的图书馆Hyperform我select不使用activeElement而是捕获所有事件，导致表单提交。 这个代码在Github上。
如果你碰巧使用Hyperform，你将如何访问触发提交的button：
$(form).on('submit', function(event) { var button = event.submittedVia; });
我实现了这个，我想它会做。
$(document).ready(function() { $("form").submit(function() { var val = $("input[type=submit][clicked=true]").val() // DO WORK });
这是设置它的提交button事件
$("form input[type=submit]").click(function() { $("input[type=submit]", $(this).parents("form")).removeAttr("clicked"); $(this).attr("clicked", "true"); });
谢谢你的回应，但这不是非常不雅的
我创build了一个testing表单，并使用Firebugfind了这个方法来获取价值;
$('form').submit(function(event){ alert(event.originalEvent.explicitOriginalTarget.value); });
不幸的是，只有Firefox支持这个事件。
这是一个似乎更清洁我的目的的方法。
首先，对于任何和所有forms：
$('form').click(function(event) { $(this).data('clicked',$(event.target)) });
当这个点击事件触发一个表单时，它只是logging稍后访问的起始目标（在事件对象中可用）。 这是一个非常宽泛的中风，因为它会触发表单上任何地方的任何点击。 优化评论是受欢迎的，但我怀疑它永远不会造成明显的问题。
然后，在$（'form'）。submit（）中，你可以查询最后一次点击的内容
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
根据这个链接 ，Event对象包含一个Event.target字段，它：
返回表示发起事件的对象的string。
我刚刚创build了一个页面来testing这个值是什么，看起来这个表示就是表单本身，而不是点击button。 换句话说，Javascript不提供确定点击button的function。
就Dave Anderson的解决scheme而言 ，在使用它之前在多个浏览器中testing它可能是一个好主意。 有可能它可以正常工作，但我不能说任何一种方式。
一个干净的方法是在每个表单button上使用click事件。 以下是一个保存，取消和删除button的HTML表单：
<form name="formname" action="/location/form_action" method="POST"> <input name="note_id" value="some value"/> <input class="savenote" type="submit" value="Save"/> <input class="cancelnote" type="submit" value="Cancel"/> <input class="deletenote" type="submit" value="Delete" /> </form>
以下是jquery。 根据点击哪个button（“保存”或“删除”），我将相应的“操作”发送到相同的服务器function。 如果“取消”，点击，我只是重新加载页面。
$('.savenote').click(function(){ var options = { data: {'action':'save'} }; $(this).parent().ajaxSubmit(options); }); $('.deletenote').click(function(){ var options = { data: {'action':'delete'} }; $(this).parent().ajaxSubmit(options); }); $('.cancelnote').click(function(){ window.location.reload(true); return false; });
我search并find了几种方法来获取提交buttonname + value使用jQuery + AJAX发送到服务器。 我不是很喜欢他们
其中一个最好的就是猎人的解决scheme！
但我自己又写了一个。
我想分享，因为它是好的，而且，根据我的需要，它也适用于通过ajax（在document.ready之后）加载的表单：
$(document).on('click', 'form input[type=submit]', function(){ $('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value')); });
简单！ 当点击提交button时，一个隐藏的字段被添加到表单中，使用相同的提交button的name和value 。
编辑：下面的版本更容易阅读。 此外，它需要删除以前附加的隐藏字段（在提交相同的forms两次，这是使用AJAX时，这是完全可能的情况下）的情况下。
改进的代码：
$(document).on('click', 'form input[type=submit]', function(){ var name = $(this).attr('name'); if (typeof name == 'undefined') return; var value = $(this).attr('value'); var $form = $(this).parents('form').first(); var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value); $form.find('input.temp-hidden').remove(); $form.append($input); });
你可以用“event.originalEvent.x”和“event.originalEvent.y”来尝试这种方式：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>test</title> </head> <body> <form id="is_a_form"> <input id="is_a_input_1" type="submit"><br /> <input id="is_a_input_2" type="submit"><br /> <input id="is_a_input_3" type="submit"><br /> <input id="is_a_input_4" type="submit"><br /> <input id="is_a_input_5" type="submit"><br /> </form> </body> </html> <script> $(function(){ $.fn.extend({ inPosition: function(x, y) { return this.each(function() { try{ var offset = $(this).offset(); if ( (x >= offset.left) && (x <= (offset.left+$(this).width())) && (y >= offset.top) && (y <= (offset.top+$(this).height())) ) { $(this).css("background-color", "red"); } else { $(this).css("background-color", "#d4d0c8"); } } catch(ex) { } }); } }); $("form").submit(function(ev) { $("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y); return false; }); }); </script>
我确实尝试了一些提供的例子，但是它们并不适合我们的目的。
这是一个小提琴显示： http : //jsfiddle.net/7a8qhofo/1/
我面临着类似的问题，这就是我们如何以我们的forms解决问题。
$(document).ready(function(){ // Set a variable, we will fill later. var value = null; // On submit click, set the value $('input[type="submit"]').click(function(){ value = $(this).val(); }); // On data-type submit click, set the value $('input[type="submit"][data-type]').click(function(){ value = $(this).data('type'); }); // Use the set value in the submit function $('form').submit(function (event){ event.preventDefault(); alert(value); // do whatever you need to with the content }); });
jQuery似乎没有提交提交事件的数据。 看起来你提出的方法是你最好的select。
只是另一个解决scheme，因为没有其他人满足我的要求 优点是，检测到点击和按键（input和空格） 。
// Detects the Events var $form = $('form'); $form.on('click keypress', 'button[type="submit"]', function (ev) { // Get the key (enter, space or mouse) which was pressed. if (ev.which === 13 || ev.which === 32 || ev.type === 'click') { // Get the clicked button var caller = ev.currentTarget; // Input Validation if (!($form.valid())) { return; } // Do whatever you want, eg ajax... ev.preventDefault(); $.ajax({ // ... }) } }
这对我来说最合适。
（事件）
function submForm(form,event){ var submitButton; if(typeof event.explicitOriginalTarget != 'undefined'){ // submitButton = event.explicitOriginalTarget; }else if(typeof document.activeElement.value != 'undefined'){ // IE submitButton = document.activeElement; }; alert(submitButton.name+' = '+submitButton.value) } <form action="" method="post" onSubmit="submForm(this, event); return false;">
