我有一个JSP页面,上面有标准表单。我有两个按钮,每个按钮在按下时执行不同的操作,并提交表单 - 动作1和动作2。
我最初设置了一个按钮,所以通过以下方式完成所有操作并且工作正常:
$('#form').submit( function() { .... }
但是现在我有两个按钮,我希望它能做同样的事情,但是如何找到我按下的按钮。
我可以通过.click函数执行此操作,但我不想破坏现有的form.submit功能。
以下是我的代码 - 这不起作用:
$('#form').submit( function() {
// Set the field array variables with data
$('button[name="action1"], [name="action2"]').each(function(index) {
alert('index : ' + index );
alert('value : ' + this.value);
});
$('button[name="action1"]').click(function(e) {
alert('ac1 clicked');
});
$('button[name="action2"]').click(function(e) {
alert('ac2 clicked');
});
我的html按钮是:
<button id="submitButton" name="action1" value="action1" type="submit">action 1</button>
<button id="submitButton" name="action2" value="action2" type="submit">action 2</button>
我有没有办法在form.submit中执行此操作,或者执行.click的方式,然后提交表单。我有点迷失了解决方案吗?
请帮助:)
答案 0 :(得分:2)
您可以阅读事件对象的相关目标。
$('#form').on('submit', function(evt) {
if (evt.relatedTarget && $(relEl).is('input[type=submit]')) {
/* related element is a button - do something */
}
evt.preventDefault(); //cancel form submit, as required
});
答案 1 :(得分:0)
在按钮的单击处理程序中,在提交表单之前设置隐藏字段。然后在请求处理程序中读取该隐藏字段的值,以找出请求的操作。
答案 2 :(得分:0)
将事件处理程序绑定到按钮
$('button').on('click', function(e) {
var buttonId = $(this).attr('name');
if(buttonId = 'action1') {
// action1 was pressed
} else {
// action2 was pressed
}
$('#form').trigger('submit'); // trigger submit of form.
e.preventDefault();
});
答案 3 :(得分:0)
对于标准HTML表单提交:
HTML:
<form method="..." action="...">
...
<input type="hidden" name="action">
<input value="action1" type="submit" value="action 1" />
<input value="action2" type="submit" value="action 2" />
...
</form>
使用Javascript:
$('button[type="submit"]').on('click', function() {
$("#action").val(this.value);//where "#action" selects an input field (in the same form) of type="hidden"
});
对于AJAX提交,请执行相同操作,但在提交处理程序中将操作字段的值读回javascript。
答案 4 :(得分:0)
首先,永远不要在同一页面上包含两个具有相同ID的dom元素。 class属性适用于此类事物。将按钮的id分别更改为submitButton1和submitButton2然后应该可以工作:
$('#submitButton1').closest('#form').submit(function() {
// first button action
});
$('#submitButton2').closest('#form').submit(function() {
// second button action
});