停止在我的页面中提交所有表单 [英] Stop all form submit in my page
问题描述
我需要中断我的网页的所有表单提交，并且需要向其添加一个额外的输入字段.我需要用js/Jquery来做到这一点.
My need is to interrupt all form submit of my webpage and need to add a extra input field to it. I need to do it with js/Jquery.
我可以使用单一形式(使用名称/ID)来执行此操作.但是我需要对我网站上提交的所有100份表格进行处理. (在我的情况下，所有表单都是使用form元素的submit()方法(而不是jQuery的submit()]提交的.)
I can do this for single form (using name/ID). But I need to do it for all 100s of form submit in my website. (In my case all forms are submitted using the form element's submit() method [not jQuery's submit()].)
有什么办法可以做到?像覆盖实际的form.submit()方法一样?
Is there any way I can do it? Like overriding actual form.submit() method?
推荐答案
就我而言，所有表格都是使用javascript Submit()方法提交的
In my case all forms are submitted using javascript submit() method
在这种情况下，您可以包装该方法.这很重要，因为在调用DOM的HTMLFormElement#submit方法时，未触发了submit事件处理程序. (如果改用jQuery的submit方法，则它会在提交表单之前触发处理程序.)
In that case, you can wrap that method. Which is important, because when you call the DOM's HTMLFormElement#submit method, submit event handlers are not triggered. (If you use jQuery's submit method instead, it does trigger handlers before submitting the form.)
以下是不使用任何库即可包装该函数的方法:
Here's how you wrap that function without using any libraries:
Array.prototype.forEach.call(document.querySelectorAll("form"), function(form) {
var realSubmit = form.submit;
form.submit = function() {
// Do your stuff
// ...
// Submit the form
realSubmit.call(form);
};
});
...或者您已经用jQuery标记了问题jquery:
...or as you've tagged your question jquery, with jQuery:
$("form").each(function() {
var form = this;
var realSubmit = form.submit;
form.submit = function() {
// Do your stuff
// ...
// Submit the form
realSubmit.call(form);
};
});
您需要检查目标浏览器是否允许它.
You'll need to check that your target browsers allow it. Modern ones do.
这是一个完整的示例: 实时复制
Here's a complete example: Live Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<p>This page adds the q field to a form it submits to Google</p>
<form method="GET" action="http://google.com/search" target="_blank">
<input id="sendDOM" type="button" value="Send with DOM's submit">
<input id="sendjQuery" type="button" value="Send with jQuery's submit">
</form>
<script>
$("#sendDOM").click(function() {
$("form")[0].submit();
});
$("#sendjQuery").click(function() {
$("form").submit();
});
// Wrap submit on the forms
$("form").each(function() {
var form = this;
var realSubmit = form.submit;
form.submit = function() {
// Do your stuff
var el = document.createElement("input");
el.type = "hidden";
el.name = "q";
el.value = "kittens";
form.appendChild(el);
// Submit the form
realSubmit.call(form);
};
});
</script>
</body>
</html>
这篇关于停止在我的页面中提交所有表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
