JavaScript监听form表单提交

Question

楼主遇到一个问题，项目比较古老，代码中多使用行内js来进行运作。
但是遇到一个关于表单提交的问题，涉及的页面比较多，不太好改！
问题
表单是使用行内js onclick=“submit()” 这样的方式来进行交互的，代码使用

document.form1.submit(); // 来进行提交

在这样的情况下 我如何使用js监听这个form表单的submit事件呢？或者是其他的解决方发！
感谢🙏

Answer 1

根据标准form.submit是最后的提交手段,中间没有事件捕捉,正常的方法是
1,按钮响应按钮操作,在函数中调用form.submit(例子如下)
2,为form增加onsubmit,按钮采用input:submit来进行表单提交(例子略)
不正常的方法,重载form的submit方法,调用submit按钮的点击方法进行提交.(例子如下)

http://js.do/code/overridesubmit

收获:
原生方法也可以被覆盖!

代码如下:

<p>
不正常的方法
<form name='form1' id=form1 method='post' action='http://www.baidu.com'>
<input type=text name='n' value=1 >
<input type=button onclick='submit()' name='n' value='test'>
<input style='display:none' type=submit id='post'>
</form>

<script>

form1.submit=function(){let oldsubmit=this.submit;alert(oldsubmit);post.click()}

</script>

</p>
<p>
正常的方法
<form name='form2' id=form1 method='post' action='http://www.baidu.com'>
<input type=text name='n' value=1 >
<input type=button onclick='btnclick()' name='n' value='test'>
</form>

<script>

function btnclick(){
alert('do something');
form2.submit();
}


</script>
</p>

Answer 2

试试这样？
onclick="fu()";function fu(){your code .....;submit()}