我.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>
除了在每个按钮上应用.click()事件之外,有没有办法确定单击了哪个提交按钮？
hun*_*ter 229
我问了同样的问题:如何从表单提交事件中获取导致提交的按钮？
我最终想出了这个解决方案并且效果很好:
$(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");
});
});
在您使用多个表单的情况下,您可能需要稍微调整一下,但它仍然适用
小智 85
我发现这很有效.
$(document).ready(function() {
$( "form" ).submit(function () {
// Get the submit button element
var btn = $(this).find("input[type=submit]:focus" );
});
}
sed*_*nym 63
这对我有用:
$("form").submit(function() {
// Print the value of the button that was clicked
console.log($(document.activeElement).val());
}
Nic*_*k F 41
提交表单时:
document.activeElement 将为您提供单击的提交按钮.
document.activeElement.getAttribute('value') 会给你那个按钮的价值.
Jon*_*sch 27
这个方法对我来说似乎更干净.
首先,对于任何和所有形式:
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
当为表单触发此单击事件时,它只记录稍后要访问的原始目标(在事件对象中可用).这是一个相当广泛的笔划,因为它将触发表单上任何位置的任何单击.欢迎优化评论,但我怀疑它永远不会引起明显的问题.
然后,在$('form').submit()中,您可以查询最后点击的内容,例如
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
law*_*ler 13
哇,有些解决方案会变得复杂!如果您不介意使用简单的全局,只需利用输入按钮单击事件首先触发的事实.可以通过使用$('#myForm input')进一步过滤$('input')选择器中的一种形式.
$(document).ready(function(){
var clkBtn = "";
$('input[type="submit"]').click(function(evt) {
clkBtn = evt.target.id;
});
$("#myForm").submit(function(evt) {
var btnID = clkBtn;
alert("form submitted; button id=" + btnID);
});
});
我找到了最好的解决方案
$(document.activeElement).attr('id')
这不仅适用于输入,也适用于按钮标签.它也获得了按钮的ID.
小智 7
哇...很高兴在这里看到太多解决方案。但是在SubmitEvent接口上有一个原生的 Javascript 属性提交器。https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter
原生 Javascript
var btnClicked = event.submitter;
jQuery 版本
var btnClicked = event.originalEvent.submitter;
另一种可能的解决方案是在表单中添加隐藏字段:
<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);
});
现在在表单submition处理程序中读取隐藏变量并根据它来决定:
var act = $('form#myForm #btaction').val();
以Stan和yann-h为基础,但这个默认为第一个按钮.这种整体方法的优点在于它可以同时选择点击和输入键(即使焦点不在按钮上.如果你需要允许输入表单,那么只需在按钮聚焦时响应这一点(即斯坦的回答.在我的情况下,我想允许输入提交表格,即使用户当前的焦点在文本框上.
我也使用'name'属性而不是'id',但这是相同的方法.
var pressedButtonName =
typeof $(":input[type=submit]:focus")[0] === "undefined" ?
$(":input[type=submit]:first")[0].name :
$(":input[type=submit]:focus")[0].name;
小智 5
这个对我有用
$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);
}
小智 5
这是我的解决方案：
$('#form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});
您只需在提交表单时获取事件对象即可。由此，获取提交者对象。如下：
$(".review-form").submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
}
如果您想将此表单发送到后端，您可以通过 new FormData() 创建一个新的表单元素，并设置按下按钮的键值对，然后在后端访问它。像这样的东西 -
$(".review-form").submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
let form = $(this);
let newForm = new FormData($(form)[0]);
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.attr("name"));
if ((submitter_btn.attr("name") == "approve_btn") ||
(submitter_btn.attr("name") == "reject_btn")){
newForm.set("action_for", submitter_btn.attr("name"));
} else {
console.log("there is some error!");
return;
}
}
我基本上试图建立一个表单，用户可以在其中批准或不批准/拒绝产品以进行任务中的进一步处理。我的 HTML 表单是这样的 -
<form method="POST" action="{% url 'tasks:review-task' taskid=product.task_id.id %}"
class="review-form">
{% csrf_token %}
<input type="hidden" name="product_id" value="{{product.product_id}}" />
<input type="hidden" name="task_id" value="{{product.task_id_id}}" />
<button type="submit" name="approve_btn" class="btn btn-link" id="approve-btn">
<i class="fa fa-check" style="color: rgb(63, 245, 63);"></i>
</button>
<button type="submit" name="reject_btn" class="btn btn-link" id="reject-btn">
<i class="fa fa-times" style="color: red;"></i>
</button>
</form>
如果您有任何疑问，请告诉我。
| 归档时间： |
|
| 查看次数： |
256201 次 |
| 最近记录： |