我有一个.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()事件外，有没有办法确定哪个提交按钮被单击了?
另一个可能的解决方案是在表单中添加一个隐藏字段:
<input type="hidden" id="btaction"/>
然后在ready函数中添加函数来记录按下的键:
$('form#myForm #btnSubmit').click(function() {
$('form#myForm #btaction').val(0);
});
$('form#myForm #btnSubmitAndSend').click(function() {
$('form#myForm #btaction').val(1);
});
$('form#myForm #btnDelete').click(function() {
$('form#myForm #btaction').val(2);
});
现在在表单提交处理程序中读取隐藏变量并基于它进行决定:
var act = $('form#myForm #btaction').val();
你想像这样使用window.event.srcElement.id:
function clickTheButton() {
var Sender = window.event.srcElement;
alert("the item clicked was " + Sender.id)
}
对于如下所示的按钮:
<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>
你会得到一个警告，上面写着:“点击的项目是我的按钮。
在改进的示例中，您可以将window.event.srcElement添加到process_form_submission中，这样就可以引用调用该流程的元素。
我问了同样的问题:如何从表单提交事件中获得引起提交的按钮?
我最终想出了这个解决方案，而且效果很好:
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val();
// DO WORK
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
在你有多个表单的情况下，你可能需要稍微调整一下，但它仍然适用
另一个可能的解决方案是在表单中添加一个隐藏字段:
<input type="hidden" id="btaction"/>
然后在ready函数中添加函数来记录按下的键:
$('form#myForm #btnSubmit').click(function() {
$('form#myForm #btaction').val(0);
});
$('form#myForm #btnSubmitAndSend').click(function() {
$('form#myForm #btaction').val(1);
});
$('form#myForm #btnDelete').click(function() {
$('form#myForm #btaction').val(2);
});
现在在表单提交处理程序中读取隐藏变量并基于它进行决定:
var act = $('form#myForm #btaction').val();
我能够使用jQuery originalEvent。提交Chrome与ASP。Net Core web应用程序:
我的.cshtml表单:
<div class="form-group" id="buttons_grp">
<button type="submit" name="submitButton" value="Approve" class="btn btn-success">Approve</button>
<button type="submit" name="submitButton" value="Reject" class="btn btn-danger">Reject</button>
<button type="submit" name="submitButton" value="Save" class="btn btn-primary">Save</button>
...
jQuery提交处理程序:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function() {
...
// Ensure that we log an explanatory comment if "Reject"
$('#update_task_form').on('submit', function (e) {
let text = e.originalEvent.submitter.textContent;
if (text == "Reject") {
// Do stuff...
}
});
...
jQuery微软捆绑了我的ASP。Net Core环境是v3.3.1。
由于我不能对已接受的答案进行评论，我在这里带来了一个修改后的版本，它应该考虑到表单之外的元素(即:使用form属性附加到表单上)。这是针对现代浏览器的:http://caniuse.com/#feat=form-attribute。最接近的('form')被用作不支持的form属性的回退
$(document).on('click', '[type=submit]', function() {
var form = $(this).prop('form') || $(this).closest('form')[0];
$(form.elements).filter('[type=submit]').removeAttr('clicked')
$(this).attr('clicked', true);
});
$('form').on('submit', function() {
var submitter = $(this.elements).filter('[clicked]');
})
