我有一个.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();
您可以在提交表单时获得事件对象。从中获取submitter对象。如下:
$(".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") {
newForm.set("action_for", submitter_btn.attr("name"));
} else if (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>
如果你有任何疑问请告诉我。
由于我不能对已接受的答案进行评论，我在这里带来了一个修改后的版本，它应该考虑到表单之外的元素(即:使用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]');
})
使用这个出色的答案，您可以检查活动元素(按钮)，将隐藏输入附加到表单，并可选地在提交处理程序的末尾删除它。
$('form.form-js').submit(function(event){
var frm = $(this);
var btn = $(document.activeElement);
if(
btn.length &&
frm.has(btn) &&
btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
btn.is('[name]')
){
frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
}
// Handle the form submit here
$('#form-js-temp').remove();
});
附注:我个人在所有通过JavaScript提交的表单上添加了form-js类。
