我有一个.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()事件外，有没有办法确定哪个提交按钮被单击了?
我能够使用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').click(function(event) {
$(this).data('clicked',$(event.target))
});
当为表单触发此单击事件时，它只是记录稍后要访问的原始目标(在事件对象中可用)。这是一个相当宽泛的描边，因为它将在表单上的任何地方触发任何单击。欢迎提供优化评论，但我怀疑它永远不会引起明显的问题。
然后，在$('form').submit()中，您可以查询上次点击的内容，例如
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
这是一个使用这个的例子。表单以获取提交的正确表单，数据字段用于存储最后单击/聚焦的元素。我还将提交代码包装在一个超时内，以确保在执行之前发生单击事件(一些用户在评论中报告，在Chrome上，有时在提交之后会触发单击事件)。
当使用键和鼠标/手指导航时，不指望浏览器在RETURN键上发送单击事件(虽然没有伤害)，我为按钮和字段的焦点事件添加了一个事件处理程序。
您可以在项目中添加type="submit"按钮，当单击时保存它们自己。
在演示中，我设置了一个红色边框来显示所选项目，并设置了一个警告，显示名称和值/标签。
这是小提琴
下面是(相同的)代码:
Javascript:
$("form").submit(function(e) {
e.preventDefault();
// Use this for rare/buggy cases when click event is sent after submit
setTimeout(function() {
var $this=$(this);
var lastFocus = $this.data("lastFocus");
var $defaultSubmit=null;
if(lastFocus) $defaultSubmit=$(lastFocus);
if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
// If for some reason we don't have a submit, find one (the first)
$defaultSubmit=$(this).find("input[type=submit]").first();
}
if($defaultSubmit) {
var submitName=$defaultSubmit.attr("name");
var submitLabel=$defaultSubmit.val();
// Just a demo, set hilite and alert
doSomethingWith($defaultSubmit);
setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
} else {
// There were no submit in the form
}
}.bind(this),0);
});
$("form input").focus(function() {
$(this.form).data("lastFocus", this);
});
$("form input").click(function() {
$(this.form).data("lastFocus", this);
});
// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
$aSelectedEl.css({"border":"4px solid red"});
setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}
HTML:假
<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>
<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>
愚蠢的CSS:
input {display:block}
