在调试时阻止表单提交导致重定向

Question

我不确定要在这里添加哪些标签。

我在Javascript中为formSubmit事件添加了一些跟踪功能。我想通过在我的浏览器中多次提交表单进行试验，并想知道Chrome中的某些设置或某些JS我可以在控制台中键入以阻止表单在我提交时重定向吗？

Answer 1

如果你的页面上有jQuery，并且你的表单有一个ID，你可以在调试之前在你的控制台中运行它：

$("#formId").submit(function(e){ e.preventDefault(); });

这可以在没有任何条件的情况下更加详细地完成：

document.getElementsByTagName("form")[0].onsubmit = function(e) { e.preventDefault(); };

第二个假设有问题的表单是您网页上的第一个表单。索引可能需要调整。

对于所有使用jQuery的表单：

$("form").submit(function(e){ e.preventDefault(); });

或者没有jQuery：

Array.prototype.forEach.call(document.getElementsByTagName("form"), function(form) { form.onsubmit = function(e) { e.preventDefault(); }; });

注意 - 函数是通过Array原型调用的，因为document.getElementsByTagName返回一个HTMLCollection而不是一个数组。

对于没有jQuery的两个，如果您尝试测试已绑定到表单的提交处理程序，则可能会遇到问题。如果是这种情况，请替换

form.onsubmit = function(e) { e.preventDefault(); };

用这个：

form.addEventListener("submit", function(e) { e.preventDefault(); });

稍长一些，但不会覆盖绑定到表单的任何现有事件处理程序。