我有一个非常简单的表单,其中包含名称字段和两个提交按钮:"更改"和"删除".我需要在提交表单时在javascript中进行一些表单验证,因此我需要知道单击了哪个按钮.如果用户点击回车键,则"更改"值是进入服务器的值.所以,我只需要知道是否点击了"删除"按钮.
我可以确定点击了哪个按钮吗？或者我是否需要将"删除"按钮从提交更改为常规按钮并捕获其onclick事件以提交表单？
表单如下所示:
<form action="update.php" method="post" onsubmit="return checkForm(this);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
在checkForm()函数中,form["submit"]是一个节点列表,而不是我可以获取的单个元素的值.
您还可以通过onclick多种不同方式使用该事件来解决问题.
例如:
<input type="submit" name="submit" value="Delete"
onclick="return TryingToDelete();" />
在TryingToDelete()JavaScript中的函数中,执行您想要的操作,然后return false如果不希望继续执行删除操作.
这是一个使用jQuery 的不引人注目的方法 ......
$(function ()
{
// for each form on the page...
$("form").each(function ()
{
var that = $(this); // define context and reference
/* for each of the submit-inputs - in each of the forms on
the page - assign click and keypress event */
$("input:submit", that).bind("click keypress", function ()
{
// store the id of the submit-input on it's enclosing form
that.data("callerid", this.id);
});
});
// assign submit-event to all forms on the page
$("form").submit(function ()
{
/* retrieve the id of the input that was clicked, stored on
it's enclosing form */
var callerId = $(this).data("callerid");
// determine appropriate action(s)
if (callerId == "delete") // do stuff...
if (callerId == "change") // do stuff...
/* note: you can return false to prevent the default behavior
of the form--that is; stop the page from submitting */
});
});
注意:此代码使用id-property引用元素,因此您必须更新标记.如果您希望我更新我的答案中的代码以使用name-attribute来确定适当的操作,请告诉我.
<html>
<script type="text/javascript">
var submit;
function checkForm(form)
{
alert(submit.value);
return false;
}
function Clicked(button)
{
submit= button ;
}
</script>
<body>
<form method="post" onsubmit="return checkForm(this);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input onclick="Clicked(this);" type="submit" name="submit" value="Change" />
<input onclick="Clicked(this);" type="submit" name="submit" value="Delete" />
</form>
</body>
</html>
一些浏览器（至少 Firefox、Opera 和 IE）支持这个：
<script type="text/javascript">
function checkForm(form, event) {
// Firefox || Opera || IE || unsupported
var target = event.explicitOriginalTarget || event.relatedTarget ||
document.activeElement || {};
alert(target.type + ' ' + target.value);
return false;
}
</script>
<form action="update.php" method="post" onsubmit="return checkForm(this, event);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
对于固有的跨浏览器解决方案，您必须向onclick按钮本身添加处理程序。
你可以使用该SubmitEvent.submitter财产。
form.addEventListener('submit', event => console.log(event.submitter))
| 归档时间： |
|
| 查看次数： |
24507 次 |
| 最近记录： |